CODEWITHSUNDEEP
csscross-browser
Neileo72
Neileo72

Reputation: 1

CSS Accodion Menu not working in Chrome/Safari

I need to create a simple accordion style menu that displays/hides when clicked. It works in IE11 and FF but does not close in Chrome/Safari. Can anyone provide a work around for these browsers? I like the simpleness of this code and would like to use it if possible.. Thanks!

.show{
  display:none;
}
.hide:focus+.show{
  display:inline;
}
.hide:focus{
  display:none;
}
.hide:focus~#list{
  display:none;
}
<p>Accordian Example</p>
<div>
    <a href="#" class="hide">[hide]</a>
    <a href="#" class="show">[show]</a>
    <ol id="list">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ol>
</div>

Upvotes: 0

Views: 150

Answers (2)

Dhaneshwar Patidar
Dhaneshwar Patidar

Reputation: 1

  Try This


.show { display:none;}
.hide , .show { position :absolute; top:0; left:0; }
 .hide:focus {opacity:0; font-size:0;}
 .hide:focus + .show { display:block;}
 .hide:focus~.list {
  display:none;
  }
<div>
<a href="#" class="hide"><span>[hide]<span></a>
<a href="#" class="show">[show]</a>
<ol class="list">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ol>
</div>

Upvotes: 0

Sujeet Jaiswal
Sujeet Jaiswal

Reputation: 1089

I have checked that on FF and Chrome.

Reason for different behaviour

In Chrome, when an element has its display property set to none, it can not be in focused state, which I believe is a more predictable and uniform behavior. But In Firefox, even when the element has its display property set to none it is some how retaining the focus.

Now, since both the browsers are behaving differently with focus retention of the element, the net output of your code is different browser.

Can you use this approach ? : NO ... the reason is :

Even if you consider the Firefox, since your visibility of the accordion content is based on the focus, as soon as the user click anywhere on the site, even on the blank portion of the site, the element will loose its focus, and it won't work as expected.

To verify this, open that example on firefox, click on hide, then click on white space, you will see that the list items will re-appear.

A better approach for CSS only accordion

This uses a checkbox to decide when to show or hide. We hide the checkbox, by placing it outside of the viewport and using a label to create a clickable area.

#toggler{
position:fixed;
  top:-100px;
}
label{
cursor:pointer;
}
#toggler ~ ol{
  display:none;
}
#toggler:checked ~ ol{
  display:block;
}

#toggler ~ label .show,#toggler:checked ~ label .hide{
  display:inline-block;
}
#toggler:checked ~ label .show,#toggler ~ label .hide{
  display:none;
}
<p>Accordian Example</p>
<div>
  <input id="toggler" type="checkbox" checked/>
    <label for="toggler">
      Toggle Accordion
      <b class="show">[show]</b>
      <b class="hide">[hide]</b>
      
    </label>
    <ol id="list">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ol>
</div>

Upvotes: 1

Related Questions