Accordion using CSS and without jquery/javascript

Question

Below is the HTML code and i want to make the accordion using CSS ,without jquery in which when the page loads the first tab is open by default when i clicked on the another tab its div will open and previous opened tab closes automatically.

<div id="wrap">
        <ul id="accordion">
            <li>
                <h2>Title One</h2>
                <div class="content">
                    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>Title Two</h2>
                <div class="content">
                    Tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
                </div>
            </li>
            <li>
                <h2>Title Three</h2>
                <div class="content">
                    Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
                </div>
            </li>
            <li>
                <h2>Title Four</h2>
                <div class="content">
                    Consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </div>
            </li>
        </ul>
    </div><!-- wrap -->

Below is the CSS that i am using in which the tab opens on mouse hover.but i want to be in my way Please help.

Code Pen: https://codepen.io/anon/pen/dArfH

Note: Also i want when any tab is active its header color changes.and on mouse over any other tab color also changes

#wrap{
            margin-left:5px;
  margin-top:5px;
            width: 100px;
        }

        #accordion{
            width: 200px;
            margin: 0px;
            padding: 0px;
            list-style: none;
        }

        #accordion h2{
            font-size: 10pt;
            margin: 0px;
            padding: 5px;
            background: #ccc;
            border-bottom: 1px solid #fff;
  cursor:pointer;
        }
        #accordion li div.content{
            display: none;
            padding:5px;
            background: #f9f9f9;
            border: 1px solid #ddd;
        }

        #accordion li:hover div.content{
            display: inherit;

        }

try adding a :hover to the dom element that you want to trigger the show which would probably be changing display value from none to block — b_dubb, Sep 26 '13 at 16:49

score 0 · Answer 1 · edited May 23 '17 at 12:28

0

Check out this question asked on Stackoverflow:

CSS active

Basically, you can set the first menu to display with a regular css rule. When you want to switch the menus, you use a <button>whatever</button> or <a href="#">whatever</a> tags and change the css active rule of each of the buttons to hide every other menu but the one clicked. (as shown in the link above)

The downside of this is that you loose browser compatibility, as it is a more recent rule of css. If you wish to keep compatibility, I suggest switching to javascript for the menu.

edited May 23 '17 at 12:28

Community

1
1

answered Sep 26 '13 at 16:43

JakeMoz

94
7

using a css styled unordered list to build navigation is far better than javascript – b_dubb Sep 26 '13 at 16:45
can you do that for me as i am new i know very little – Harish Gupta Sep 26 '13 at 16:47
@b_dubb I agree with you on that. In my research there are problems with the active with IE... but hey, when ISN'T there a problem with IE.... – JakeMoz Sep 26 '13 at 16:57
@HarishGupta It would be much more beneficial for you if you first tried to code it yourself. Give a man a fish, feed him for a day, teach a man to fish, feed him for a lifetime. If you would like a push in the right direction though I can give you some links to tutorials about this. – JakeMoz Sep 26 '13 at 16:58
@HarishGupta Here are the links: [active CSS](http://www.w3schools.com/cssref/sel_active.asp) and [CSS Rules](http://www.w3schools.com/cssref/default.asp) I am sure you can find your way around there and branch out. Good luck! – JakeMoz Sep 26 '13 at 17:32

score 0 · Answer 2 · answered Sep 26 '13 at 17:59

0

Have a look at this it will help as it is what you are looking for

http://tympanus.net/Tutorials/CSSClickEvents/index.html

answered Sep 26 '13 at 17:59

Hive7

3,599
2
22
38

Accordion using CSS and without jquery/javascript

2 Answers2