I'm trying to perform an accordion using jQuery. The problem is that my subchildren are not showing or I would say the submenu panel is not expanding when I click it.
This is the structure of the menu of I want to see when I click CLOTHING > MEN'S CLOTHING:
\-CLOTHING
\-MEN'S CLOTHING
\-SHIRTS
\-POLO
\-JACKETS
but I'm only getting this:
\-CLOTHING
\-MEN'S CLOTHING
\-SHIRTS
Here's the fiddle to my problem.
You're not seeing all of your submenu items because you're not updating your max-heights on the parent <ul>'s. For example, you open "Clothing" and the submenu <ul> gets a max-height of 101px. Then when you open "Men's Clothing", the "Clothing" <ul> keeps the max-height of 101px but it's actually taller now because you're opening more sub-children. You need to loop back over the parent <ul>'s as well as the opening <ul> to update all of the max-heights, not just for the <ul> that you're opening.
FYI: Given that you're using jQuery, you could drastically simplify your JS and do something like this:
$(function() {
$(".menu_top_nav li").click(function(e) {
e.stopImmediatePropagation();
if ($("> ul", this).length) {
$("> ul", this).slideToggle();
}
});
});@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,900');
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Poppins', sans-serif;
font-size: 14px;
line-height: 23px;
font-weight: 400;
background: #FFFFFF;
color: #1e1e27;
}
div {
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ul {
list-style: none;
margin-bottom: 0px;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 14px;
line-height: 1.7;
font-weight: 500;
color: #989898;
-webkit-font-smoothing: antialiased;
-webkit-text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
}
p a {
display: inline;
position: relative;
color: inherit;
border-bottom: solid 2px #fde0db;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
a,
a:hover,
a:visited,
a:active,
a:link {
text-decoration: none;
-webkit-font-smoothing: antialiased;
-webkit-text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
}
p a:active {
position: relative;
color: #FF6347;
}
p a:hover {
color: #FF6347;
background: #fde0db;
}
p a:hover::after {
opacity: 0.2;
}
::selection {
background: #fde0db;
color: #FF6347;
}
p::selection {
background: #fde0db;
}
h1 {
font-size: 72px;
}
h2 {
font-size: 40px;
}
h3 {
font-size: 28px;
}
h4 {
font-size: 24px;
}
h5 {
font-size: 16px;
}
h6 {
font-size: 14px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #282828;
-webkit-font-smoothing: antialiased;
-webkit-text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
}
h1::selection,
h2::selection,
h3::selection,
h4::selection,
h5::selection,
h6::selection {}
::-webkit-input-placeholder {
font-size: 16px !important;
font-weight: 500;
color: #777777 !important;
}
:-moz-placeholder
/* older Firefox*/
{
font-size: 16px !important;
font-weight: 500;
color: #777777 !important;
}
::-moz-placeholder
/* Firefox 19+ */
{
font-size: 16px !important;
font-weight: 500;
color: #777777 !important;
}
:-ms-input-placeholder {
font-size: 16px !important;
font-weight: 500;
color: #777777 !important;
}
::input-placeholder {
font-size: 16px !important;
font-weight: 500;
color: #777777 !important;
}
section {
display: block;
position: relative;
box-sizing: border-box;
}
.clear {
clear: both;
}
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix {
zoom: 1;
}
.float_left {
float: left;
}
.float_right {
float: right;
}
.fill_height {
height: 100%;
}
.super_container {
width: 100%;
overflow: hidden;
}
/*********************************
Menu
*********************************/
.menu_item {
display: block;
position: relative;
border-bottom: solid 1px #b5aec4;
vertical-align: middle;
}
.menu_item>a {
display: block;
color: #1e1e27;
font-weight: 500;
height: 50px;
line-height: 50px;
font-size: 14px;
text-transform: uppercase;
}
.menu_item>a:hover {
color: #b5aec4;
}
.menu_item>a>i {
margin-left: 8px;
}
/* REMOVED
.menu_item.active .menu_selection
{
display: block;
visibility: visible;
opacity: 1;
}
*/
.menu_selection {
margin: 0;
width: 100%;
display: none;
/* REMOVED
max-height: 0;
overflow: hidden;
*/
z-index: 1;
/* REMOVED
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
*/
}
.menu_selection li {
padding-left: 10px;
padding-right: 10px;
line-height: 50px;
}
.menu_selection li a {
display: block;
color: #232530;
border-bottom: solid 1px #dddddd;
font-size: 13px;
text-transform: uppercase;
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-ms-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: all 0.3s ease;
}
.menu_selection li a:hover {
color: #b5aec4;
}
.menu_selection li:last-child a {
border-bottom: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="menu_top_nav">
<li class="menu_item has-children">
<a href="#" class="submenu">
<!-- Populate by javascript -->
</a>
<ul class="menu_selection">
<!-- Populate by javascript -->
</ul>
</li>
<li class="menu_item"><a href="#">Home</a></li>
<li class="menu_item has-children"><a class="submenu">CLOTHING <i class="fa fa-angle-down"></i></a>
<ul class="menu_selection">
<li class="submenu_item has-subchildren"><a class="submenu">MEN'S CLOTHING <i class="fa fa-angle-down"></i></a>
<ul class="menu_selection">
<li><a href="#">TSHIRTS</a></li>
<li><a href="#">POLO SHIRTS</a></li>
<li><a href="#">JACKETS</a></li>
</ul>
</li>
<li class="submenu_item has-subchildren"><a class="submenu">WOMEN'S CLOTHING <i class="fa fa-angle-down"></i></a>
<ul class="menu_selection">
<li><a href="#">DRESSES</a></li>
<li><a href="#">SKIRTS</a></li>
<li><a href="#">TOPS</a></li>
</ul>
</li>
</ul>
</li>
</ul>I hope this helps.