Page 1 of 2

Can I make the click display property use transition?

Posted: Thu Oct 06, 2016 2:11 pm
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;
}

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

Posted: Thu Oct 06, 2016 2:37 pm
by Celauran
Maybe throw some representative markup on jsfiddle or codepen or something? Will give people a little more context.

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

Posted: Thu Oct 06, 2016 2:51 pm
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>";
      }

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

Posted: Fri Oct 07, 2016 6:38 am
by Celauran
Are you looking to achieve something like this? https://jsfiddle.net/pmtfw2f2/

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

Posted: Fri Oct 07, 2016 6:45 am
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.

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

Posted: Fri Oct 07, 2016 7:22 am
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.

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

Posted: Fri Oct 07, 2016 8:58 am
by Celauran
To the best of my knowledge, there are no parent selectors in CSS. You'd need JS to implement that.

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

Posted: Fri Oct 07, 2016 9:07 am
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?

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

Posted: Fri Oct 07, 2016 9:13 am
by Celauran
Right. You can select siblings, not parents. You have >, you have +, you do not have <

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

Posted: Fri Oct 07, 2016 9:19 am
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.

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

Posted: Fri Oct 07, 2016 9:37 am
by Celauran
Quick and dirty but is this what you're after? https://jsfiddle.net/pmtfw2f2/1/

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

Posted: Fri Oct 07, 2016 11:22 am
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>

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

Posted: Fri Oct 07, 2016 11:35 am
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.

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

Posted: Fri Oct 07, 2016 11:41 am
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??

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

Posted: Fri Oct 07, 2016 12:00 pm
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.