Implement expand and collapse

  • Resolved Karan.thakural89

    (@karanthakural89)


    10 years, 8 months ago

    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—-collapse

    Thanks

    [Moderator Note: No bumping. If it’s that urgent, please consider hiring someone instead.]

Viewing 2 replies - 1 through 2 (of 2 total)

  • 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="https://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="https://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="https://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a></p>

                </div>

            </div>

        </div>

      </div>

    This comes from a tutorial here: https://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", use data-target="#collapseOne" (/Two /Three etc.)

    Thread Starter Karan.thakural89

    (@karanthakural89)

    @electric feet: Thanks, i’ll try and get back to you.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Implement expand and collapse’ is closed to new replies.