I am implementing the JQuery UI Accordion to expand content on a website.
Below is the basic markup structure:
<div class="accordion">
<h2>Heading</h2>
<div>Content</div>
<h2>Heading</h2>
<div>Content</div>
<h2>Heading</h2>
<div>Content</div>
<h2>Heading</h2>
<div>Content</div>
</div>
I plan to utilize the JQuery UI Accordion for my mobile menu as well.
Here is the current navigation setup:
<!-- Desktop menu -->
<nav class="desktop">
<ul>
<li><a href="page-one">Page One</a></li>
<li><a href="page-two">Page Two</a></li>
<li><a href="page-three">Page Three</a></li>
<li><a href="page-four">Page Four</a></li>
</ul>
</nav>
<!-- Mobile menu -->
<nav class="mobile accordion">
<span>Menu</span>
<ul>
<li><a href="page-one">Page One</a></li>
<li><a href="page-two">Page Two</a></li>
<li><a href="page-three">Page Three</a></li>
<li><a href="page-four">Page Four</a></li>
</ul>
</nav>
The menus are triggered by a basic media query:
.mobile {
display: none;
}
@media screen and (max-width: 48em) {
.desktop {
display: none;
}
.mobile {
display: block;
}
}
Is there a more efficient way to handle this so that I don't have to duplicate my navigation markup?