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

Posted by Andreas Fischer
Andreas Fischer
8,256 Points

Accordion Menu Tabs don't expand on mobile

Hi everyone,

I tried this accordion menu (https://teamtreehouse.com/library/create-an-accordion-menu-with-css) and it works great except for one thing:

When I try it on my smartphone and tab one of the menu points, the menu doesn't expand automatically. Only after I scroll up or down a bit it opens.

Is there a possibility to let it expand right away?

Here is the code from the video:

<!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="CSS/style.css"/>
        <link rel="stylesheet" href="CSS/accordion.css"/>
    </head>
    <body>



            <div class="tab-group">  

                <!-- start tab-1 -->  
                <div class="tab">
                    <input id="tab-1" type="radio" name="tabs"> 
                    <label for="tab-1" >Label One</label>
                    <div class="tab-content">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac laoreet elit. Phasellus dignissim purus vitae urna cursus, quis congue ligula tristique. Ut nec blandit risus. Donec at orci ut justo venenatis viverra.</p>
                    </div>
                </div>
                <!-- end tab-1 -->

                <!-- start tab-2 -->  
                <div class="tab">
                    <input id="tab-2" type="radio" name="tabs"> 
                    <label for="tab-2" >Label Two</label>
                    <div class="tab-content">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac laoreet elit. Phasellus dignissim purus vitae urna cursus, quis congue ligula tristique. Ut nec blandit risus. Donec at orci ut justo venenatis viverra.</p>
                    </div>
                </div>
                <!-- end tab-2 -->

                <!-- start tab-3 -->  
                <div class="tab">
                    <input id="tab-3" type="radio" name="tabs"> 
                    <label for="tab-3" >Label Three</label>
                    <div class="tab-content">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac laoreet elit. Phasellus dignissim purus vitae urna cursus, quis congue ligula tristique. Ut nec blandit risus. Donec at orci ut justo venenatis viverra.</p>
                    </div>
                </div>
                <!-- end tab-3 -->

                <!-- start tab-4 -->  
                <div class="tab">
                    <input id="tab-4" type="radio" name="tabs"> 
                    <label for="tab-4" >Label Four</label>
                    <div class="tab-content">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac laoreet elit. Phasellus dignissim purus vitae urna cursus, quis congue ligula tristique. Ut nec blandit risus. Donec at orci ut justo venenatis viverra.</p>
                    </div>
                </div>
                <!-- end tab-4 -->

            </div>


    </body>
</html>

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

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

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

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

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

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

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

/* open the tab when label is checked */

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


/*.tab > input:not(:focus) ~ .tab-content { 
    max-height: 0;
    transition: all .75s cubic-bezier(0.19, 1, 0.22, 1) .15s;
}*/
David Conner
David Conner
Treehouse Guest Teacher
David Conner
David Conner
Treehouse Guest Teacher

I am not sure what the issue is if you are using this code exactly. When i try it on my iPhone in safari and chrome i get the the expected behavior. Do you have a link to the codebase that you are viewing on your smartphone?

2 Answers

David Conner
STAFF
David Conner
Treehouse Guest Teacher
David Conner
David Conner
Treehouse Guest Teacher

Hi Andreas,

I did some digging and apparently it is a bug. Android 4.3 and lower (together with older WebKit browsers) have issues when combining pseudo classes with adjacent or general sibling selectors.

Can look at the known issues tab here.

Luckily there is a fix which can solve your problem but may cause heavy CPU consumption. You can find the fix here.

Hope that helps!

Andreas Fischer
Andreas Fischer
8,256 Points

Hi Dave,

thank you very much for digging into it and posting a possible solution! Those stupid bugs...

Helped me a lot, thank you again.

Andreas Fischer
Andreas Fischer
8,256 Points
Andreas Fischer
Andreas Fischer
8,256 Points

Hi Dave!

Here is my codepen snippet:

http://codepen.io/baju/pen/dGojQz

I have tried it with the standard Android browser and with Firefox for Android. With the standard browser the tabs open when I move the screen a bit and with Firefox the tabs don't open at all, unfortunately. Only the font size increases.