Can I make the click display property use transition?

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Can I make the click display property use transition?

Post by simonmlewis »

When you click on faq-tile, it expands to show further information.
I'd really like it if it would expand, in a transition. So when you click again it fades out and closes. Would be nicer.

I've tried adding transition to both faq-tile and other elements but i cannot get it to work.

Code: Select all

.faq-new
{
color: #97BE00;
font-size: 1.6em;
}

.faq-tile
{
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.085);
border: 1px solid #97BE00;
border-top: 1px solid #C7D9A4;
border-left: 1px solid #C7D9A4;
margin-bottom: 30px;
padding: 15px;
transition: background-color 0.2s;
position: relative;
}

.faq-tile:hover
{
background-color: #F5F5F5;
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.095);
}

.faq-tile-new
{
position: absolute;
right: 0px;
top: 0px;
background-color: #412782;
color: #ffffff;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 10px;
padding-right: 10px;
font-size: 1em;
}

.faq-tile-circle
{
position: absolute;
background-color: #C5E18B;
width: 50px;
height: 50px;
border-radius: 50%;
bottom: -25px;
left: -25px;
text-align: center;
color: #000000;
font-size: 1.7em;
box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.075);
}


.faq-tile-circle i
{
line-height: 50px;
}

.faq-tile-question
{
cursor: pointer;
  display: block;
color: #412782;
}

.faq-tile-question h2
{
font-size: 1.6em;
}

.faq-tile-answer
{
color: #333333;
font-size: 1.2em;
padding-left: 40px;
}

.faq-tile  input{
  display: none; /* hide the checkboxes */
}
.faq-tile-question + input + div{
  display:none;
}
.faq-tile-question + input:checked + div{
  display:block;
}
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Can I make the click display property use transition?

Post by Celauran »

Maybe throw some representative markup on jsfiddle or codepen or something? Will give people a little more context.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Can I make the click display property use transition?

Post by simonmlewis »

I have never been quite able to use jsfiddle. :(

This is the markup.

Code: Select all

$query = "SELECT * FROM faq ORDER BY new DESC, priority";
  $result = $pdo->query($query);
  while ($row = $result->fetch(PDO::FETCH_OBJ)) 
      {
      $count ++;
      echo "<div class='faq-tile'>";
      if ($row->new == "yes")
      {
        echo "<div class='faq-tile-new'><i class='fa fa-info-circle' aria-hidden='true' style='color: #C5E18B'></i>  &nbsp;New question</div>";
      }
      echo "<label class='faq-tile-question' for='_$count'><h2> $row->question</h2></label>
      <input id='_$count' type='checkbox'>
      <div class='faq-tile-answer'>$row->answer
      <div class='faq-tile-circle'><i class='fa fa-info' aria-hidden='true'></i></div>
</div>
      
      </div>";
      }
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Can I make the click display property use transition?

Post by Celauran »

Are you looking to achieve something like this? https://jsfiddle.net/pmtfw2f2/
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Can I make the click display property use transition?

Post by simonmlewis »

Yes - bingo. I can see the different way you did it too with opacity.
I see Fiddle now has ads, and my firefox is blocking it from showing the page. Blast.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Can I make the click display property use transition?

Post by simonmlewis »

Can you see a way in CSS that when the Answer DIV is showing, the entire faq-tile div can change color?
This is more for mobile that desktop.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Can I make the click display property use transition?

Post by Celauran »

To the best of my knowledge, there are no parent selectors in CSS. You'd need JS to implement that.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Can I make the click display property use transition?

Post by simonmlewis »

So you can say when one is selected, to make the transparency etc of the other one 'show' and fade in. But you cannot make it's parent div change color?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Can I make the click display property use transition?

Post by Celauran »

Right. You can select siblings, not parents. You have >, you have +, you do not have <
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Can I make the click display property use transition?

Post by simonmlewis »

Ah ok. The basic idea was that you click the main div which expands it. Click again and it closes it.
Maybe I should have the expanding part on the main div. But the Label is the text, not the parent div.
There lies the problem.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Can I make the click display property use transition?

Post by Celauran »

Quick and dirty but is this what you're after? https://jsfiddle.net/pmtfw2f2/1/
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Can I make the click display property use transition?

Post by simonmlewis »

I know this sounds rookie, but how do I implement this:

Code: Select all

$('.faq-tile input').change(function(event) {
	if ($(this).is(':checked')) {
  	$(this).parent().css('background-color', 'pink');
  } else {
  	$(this).parent().css('background-color', '#F5F5F5')
  }
});

Like this?

Code: Select all

<script>
$('.faq-tile input').change(function(event) {
	if ($(this).is(':checked')) {
  	$(this).parent().css('background-color', 'pink');
  } else {
  	$(this).parent().css('background-color', '#F5F5F5')
  }
});

</script>
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Can I make the click display property use transition?

Post by Celauran »

You could. Need to ensure that jQuery is loaded first. Better practice would be to have your JS separated out and loaded where needed.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Can I make the click display property use transition?

Post by simonmlewis »

What code should I use to do that?
Need to ensure that jQuery is loaded first.
I assume you mean a particular jQuery external file??
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Can I make the click display property use transition?

Post by Celauran »

Doesn't really matter if it's external or not. Probably faster to load from a CDN, though, as the user will likely already have it cached.
Post Reply