Search code examples
phpcsstaxonomy

show more in a div with php and css


I am trying to implement show more links in several divs (like here http://www.gutscheinpony.de/outletcity.html, you click on details and you get the hidden div) However I am getting via php and taxonomy up to 50 fields like on these side and i need individual ids so that i can open each div seperatly. Problem is that I need to give each div a variable id via php!!! but i am stuck. You can see the problem here http://cloud0815.joloshop.com/shops/1822direkt (click on both "Show More" text) and only the first will open!!!)


Solution

  • If you use jQuery, you do not need to give each div an individual id. You can give each "Show more" link a class like 'show-more'. Then, bind the links to a click handler. The $(this) variable tells you which of the 50 links was clicked on. How you select the div containing the hidden text depends on your markup, but here's an example of what you can do:

    PHP:

     /* Inside a loop */
     <?php 
           $full_text = get_the_content();
           $period_pos = strpos($full_text, ".");
           $excerpt = substr($full_text, 0, $period_pos+1);    // Get the first line, assuming that a line ends with a period.
           $rest = substr($full_text, $period_pos+1);          // Get the rest of the text
     ?>
     <div class="excerpt">
          <?php echo $excerpt; ?>
     </div>
     <div class="rest">
          <?php echo $rest; ?>
     </div>
     <div class="show-more-div">
         <a href="#" class="show-more">Show more</a>
     </div>
    

    jQuery:

     $(document).ready(function(){
          $(".show-more").click(function(){
               $(this).parent().prev().slideDown();     
          });
     });