PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Sun Nov 19, 2017 3:46 am

All times are UTC - 5 hours




Post new topic Reply to topic  [ 24 posts ]  Go to page 1, 2  Next
Author Message
PostPosted: Thu Oct 06, 2016 2:11 pm 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4356
Location: United Kingdom
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.

Syntax: [ Download ] [ Hide ]
.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.


Top
 Profile  
 
PostPosted: Thu Oct 06, 2016 2:37 pm 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6391
Location: Montreal, Canada
Maybe throw some representative markup on jsfiddle or codepen or something? Will give people a little more context.

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
PostPosted: Thu Oct 06, 2016 2:51 pm 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4356
Location: United Kingdom
I have never been quite able to use jsfiddle. :(

This is the markup.

Syntax: [ Download ] [ Hide ]
$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.


Top
 Profile  
 
PostPosted: Fri Oct 07, 2016 6:38 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6391
Location: Montreal, Canada
Are you looking to achieve something like this? https://jsfiddle.net/pmtfw2f2/

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
PostPosted: Fri Oct 07, 2016 6:45 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4356
Location: United Kingdom
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.


Top
 Profile  
 
PostPosted: Fri Oct 07, 2016 7:22 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4356
Location: United Kingdom
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.


Top
 Profile  
 
PostPosted: Fri Oct 07, 2016 8:58 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6391
Location: Montreal, Canada
To the best of my knowledge, there are no parent selectors in CSS. You'd need JS to implement that.

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
PostPosted: Fri Oct 07, 2016 9:07 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4356
Location: United Kingdom
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.


Top
 Profile  
 
PostPosted: Fri Oct 07, 2016 9:13 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6391
Location: Montreal, Canada
Right. You can select siblings, not parents. You have >, you have +, you do not have <

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
PostPosted: Fri Oct 07, 2016 9:19 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4356
Location: United Kingdom
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.


Top
 Profile  
 
PostPosted: Fri Oct 07, 2016 9:37 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6391
Location: Montreal, Canada
Quick and dirty but is this what you're after? https://jsfiddle.net/pmtfw2f2/1/

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
PostPosted: Fri Oct 07, 2016 11:22 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4356
Location: United Kingdom
I know this sounds rookie, but how do I implement this:

Syntax: [ Download ] [ Hide ]
$('.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?
Syntax: [ Download ] [ Hide ]
<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.


Top
 Profile  
 
PostPosted: Fri Oct 07, 2016 11:35 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6391
Location: Montreal, Canada
You could. Need to ensure that jQuery is loaded first. Better practice would be to have your JS separated out and loaded where needed.

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
PostPosted: Fri Oct 07, 2016 11:41 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4356
Location: United Kingdom
What code should I use to do that?

Quote:
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.


Top
 Profile  
 
PostPosted: Fri Oct 07, 2016 12:00 pm 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6391
Location: Montreal, Canada
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.

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 24 posts ]  Go to page 1, 2  Next

All times are UTC - 5 hours


Who is online

Users browsing this forum: Google [Bot] and 3 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group