Implement expand and collapse
-
Hi All,
I’m very new to CSS stuff. Could anybody tell me, how to implement expand and collapse. For eg. lets say products. Under products, two headings like A and B.
+ sign –expand
-sign—-collapseThanks
[Moderator Note: No bumping. If it’s that urgent, please consider hiring someone instead.]
-
The + and – approach would require coding.
However, for a similar effect (viewing one group at a time), you could use the underlying twitter bootstrap. Add the following to a new WordPress page and preview the output:
<div id="myAccordion" class="accordion"> <div class="accordion-group"> <div class="accordion-heading"> <a href="#collapseOne" data-parent="#myAccordion" data-toggle="collapse" class="accordion-toggle">1. What is HTML?</a> </div> <div class="accordion-body collapse" id="collapseOne"> <div class="accordion-inner"> <p>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages. <a href="http://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p> </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a href="#collapseTwo" data-parent="#myAccordion" data-toggle="collapse" class="accordion-toggle">2. What is Twitter Bootstrap?</a> </div> <div class="accordion-body collapse in" id="collapseTwo"> <div class="accordion-inner"> <p>Twitter Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn more.</a></p> </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a href="#collapseThree" data-parent="#myAccordion" data-toggle="collapse" class="accordion-toggle">3. What is CSS?</a> </div> <div class="accordion-body collapse" id="collapseThree"> <div class="accordion-inner"> <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="http://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a></p> </div> </div> </div> </div>
This comes from a tutorial here: http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-accordion.php
If you want several items to stay open at the same time, then instead of using
data-parent="#myAccordion"
, usedata-target="#collapseOne"
(/Two /Three etc.)@electric feet: Thanks, i’ll try and get back to you.
- The topic ‘Implement expand and collapse’ is closed to new replies.