Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Accordion in HTML

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 423
    Comment on it

    An accordion is used to show and hide the content on click or hover of button.

    It looks similar to the dropdown.

    There are some differences between accordion and dropdown:-

    • Width of an accordion is 100% by default, we can override it by adding our own CSS. Whereas with of dropdown is less.
    • Accordion drives the page content down, while it is opened. In dropdown the content is opened over the page content.
    • Accordion is used to open various sections while in dropdown onle one section is opened.

     

    Here is the code to create Accordion:-

    HTML-

    <ul id="accordion"> <!-- main container of the accordion -->
        <li>
            <h2>Content1</h2> <!-- Heading1 of accordion on hover of which hidden text is shown -->
            <div class="text"> <!-- Text which will be displayed on hover of Heading1 -->
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
            </div>
        </li>
        <li>
            <h2>Content2</h2><!-- Heading2 of accordion on hover of which hidden text is shown -->
            <div class="text"><!-- Text which will be displayed on hover of Heading2 -->
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
            </div>
        </li>
        <li>
            <h2>Content3</h2><!-- Heading3 of accordion on hover of which hidden text is shown -->
            <div class="text"><!-- Text which will be displayed on hover of Heading3 -->
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
            </div>
        </li>
        <li>
            <h2>Content4</h2><!-- Heading4 of accordion on hover of which hidden text is shown -->
            <div class="text"><!-- Text which will be displayed on hover of Heading4 -->
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
            </div>
        </li>
    </ul>

     

    CSS-

    #accordion{ /*Width of the main container of accordion*/
        width: 600px;
        margin: 0px;
        padding: 0px;
        list-style: none;
    }
    #accordion h2{ /*Styling the heading of the content*/
        font-size: 15px;
        margin: 0px;
        padding: 10px;
        background: #33001a;
        color: #fff;
        text-align: center;
        border-bottom: 1px solid #fff;
    }
    #accordion li div.text{ /*Styling the content which is shown on hover of heading, initially it's display is none*/
        display: none;
        padding: 10px;
        background: #ffcce6;
        color: #000;
        border: 1px solid #ddd;
    }
    #accordion li:hover div.text{ /*On hover of heading, the content is shown*/
        display: block;
    }

     

    Below is the link of above code to show accordion-

    https://jsfiddle.net/hoc66yq4/

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: