Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Create an Accordion Menu with CSS

Frank Ruiz
Frank Ruiz
15,558 Points
Posted by Frank Ruiz
Frank Ruiz
15,558 Points

Accordion not working on click

Hello,

file download for this workshop so I can't compare my code to the teachers end product. For some reason my outcome is not showing the content on click as its intended to.

tab-group { margin : 0 auto; max-width : 40em; width : 100%; }

.tab { position : relative; width : 100%; }

.tab input { position : absolute; left : 0; z-index : -999; }

.tab label { background : #72d2c6; color : #fff; display : block; font-weight : bold; line-height : 3; padding-left : 0.5em; margin-bottom : 0.5em; transition : letter-spacing 0.55s; }

.tab input:focus + label, .tab label:hover { background : #85D8CE; letter-spacing : 1px; }

.tab-content { height : 0; overflow : hidden; transition : all 0.35s; }

.tab-content p { margin : 1em 0; }

.tab input:checked ~ .tab-content { max-height : 6.25em; }

2 Answers

Tomas Pustelnik
Tomas Pustelnik
15,571 Points
Tomas Pustelnik
Tomas Pustelnik
15,571 Points

Hi Frank, if you still didin't solve this - your id's for input tags have to be same as value of for attribute. Eg:

<input id="tab-5" type="radio" name="tabs">
<label for="tab-5">Label Five</label>

The way you put in code label won't pair with the input (it's looking for "tab-five" but you have only "tab-5" which is different id.

Frank Ruiz
Frank Ruiz
15,558 Points
Frank Ruiz
Frank Ruiz
15,558 Points

Thanks for the reply Tomas, that was it!

Nejc Vukovic
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points
Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points

Hi.

you are missing either a "." or "#" before "tab-group" declaration.

Coul you provide your HTML markup?

Regards,

nWEBd

Frank Ruiz
Frank Ruiz
15,558 Points
Frank Ruiz
Frank Ruiz
15,558 Points

Hey Nejc,

Thank you for your reply. I added the period but it didn't seem to fix the issue. The tabs were stretching across the page and adding the period did make it so that the max width is 40em. However The tabs are still not clickable and I cannot see the content. The only way I can get it to work is if I comment out the .tab input selector and click on the actual radio buttons. Here is my mark-up:

<!DOCTYPE html> <html lang="en"> <head> <title>Pure CSS Accordion</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="style.css"/> <link rel="stylesheet" href="accordion.css"/> </head>

<body>

    <div class="tab-group">
        <div class="tab">
            <input id="tab-1" type="radio" name="tabs">
            <label for="tab-one">Label One</label>
            <div class="tab-content">
                <p>Lorem ipsum dolor sit amet, alia menandri quaerendum no eam. No nec volumus apeirian suavitate. Ex pro eirmod percipit, in offendit fabellas suavitate ius. Nibh interpretaris pri eu, pri prima facilisis id, ea postea corpora nostrum vel. Ad invidunt eloquentiam per.</p>
            </div>
        </div>
        <div class="tab">
            <input id="tab-2" type="radio" name="tabs">
            <label for="tab-two">Label Two</label>
            <div class="tab-content">
                <p>Lorem ipsum dolor sit amet, alia menandri quaerendum no eam. No nec volumus apeirian suavitate. Ex pro eirmod percipit, in offendit fabellas suavitate ius. Nibh interpretaris pri eu, pri prima facilisis id, ea postea corpora nostrum vel. Ad invidunt eloquentiam per.</p>
            </div>
        </div> 
        <div class="tab">
            <input id="tab-3" type="radio" name="tabs">
            <label for="tab-three">Label Three</label>
            <div class="tab-content">
                <p>Lorem ipsum dolor sit amet, alia menandri quaerendum no eam. No nec volumus apeirian suavitate. Ex pro eirmod percipit, in offendit fabellas suavitate ius. Nibh interpretaris pri eu, pri prima facilisis id, ea postea corpora nostrum vel. Ad invidunt eloquentiam per.</p>
            </div>
        </div> 
        <div class="tab">
            <input id="tab-4" type="radio" name="tabs">
            <label for="tab-four">Label Four</label>
            <div class="tab-content">
                <p>Lorem ipsum dolor sit amet, alia menandri quaerendum no eam. No nec volumus apeirian suavitate. Ex pro eirmod percipit, in offendit fabellas suavitate ius. Nibh interpretaris pri eu, pri prima facilisis id, ea postea corpora nostrum vel. Ad invidunt eloquentiam per.</p>
            </div>
        </div> 
        <div class="tab">
            <input id="tab-5" type="radio" name="tabs">
            <label for="tab-five">Label Five</label>
            <div class="tab-content">
                <p>Lorem ipsum dolor sit amet, alia menandri quaerendum no eam. No nec volumus apeirian suavitate. Ex pro eirmod percipit, in offendit fabellas suavitate ius. Nibh interpretaris pri eu, pri prima facilisis id, ea postea corpora nostrum vel. Ad invidunt eloquentiam per.</p>
            </div>
        </div> 
    </div>

</body>

</html>