accordion menu expand and close on button click
Question
Basically I have this category menu that expands and closes when clicking the plus minus button it also does the same when clicking on parent category and sub category. If you click the sub sub category then it takes you to a page.
What I want is the menu will only expand when clicking the plus minus button. If you click Parent category or sub category it will take you to a page and stay open. Should look like below when loaded. Only showing sub categories open when Top level is open. Sub Sub categories only open when clicked.
Id like to have only sub categories open when a parent category is open or clicked. So if you were to load the menu it would look like
Top Level
-Sub Category
-Sub Category
-Sub category
Top Level
-Sub Category
-Sub Category
-Sub category
any help be appreciated
checkout my codepen https://codepen.io/mdaniel559/pen/QMvWwW
html
<div class="sidebar nobottommargin">
<!--Categories-->
<div class="menu-header">Categories</div>
<figure class="widget shadowonly r_corners wrapper m_bottom_30">
<div class="widget_content">
<!--Categories list-->
<ul class="categories_list">
<li class="active">
<a href="http://#" class="f_size_large scheme_color d_block relative">
<b>Top Level Category</b>
<span class="bg_light_color_1 r_corners f_right color_dark talign_c"></span>
</a>
<!--second level-->
<ul>
<li class="active">
<a href="#" class="d_block f_size_large color_dark relative">
Sub Category<span class="bg_light_color_1 r_corners f_right color_dark talign_c"></span>
</a>
<!--third level-->
<ul>
<li><a href="#" class="color_dark d_block">Sub Sub Category</a></li>
<li><a href="#" class="color_dark d_block">Sub Sub Category</a></li>
<li><a href="#" class="color_dark d_block">Sub Sub Category</a></li>
</ul>
</li>
<li>
<a href="#" class="d_block f_size_large color_dark relative">
Sub Category<span class="bg_light_color_1 r_corners f_right color_dark talign_c"></span>
</a>
<!--third level-->
<ul>
<li><a href="#" class="color_dark d_block">Sub Sub Category</a></li>
<li><a href="#" class="color_dark d_block">Sub Sub Category</a></li>
<li><a href="#" class="color_dark d_block">Sub Sub Category</a></li>
</ul>
</li>
<li>
<a href="#" class="d_block f_size_large color_dark relative">
Sub Category<span class="bg_light_color_1 r_corners f_right color_dark talign_c"></span>
</a>
<!--third level-->
<ul>
<li><a href="#" class="color_dark d_block">Sub Sub Category</a></li>
<li><a href="#" class="color_dark d_block">Sub Sub Category</a></li>
<li><a href="#" class="color_dark d_block">Sub Sub Category</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</figure>
</div>
css
*{
margin:0;
padding:0;
border:none;
}
figure{display:block}
a, b, body, div, figure, html, li, span, ul{
background: transparent;
border: 0 none;
font-weight: inherit;
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: top;
}
a{
text-decoration:none;
outline: none !important;
}
b{
font-weight:bold !important;
}
ul{
list-style: none;
}
html,body{
height:100%;
}
/* -----------------------------------
2. Basic classes and elements
------------------------------------- */
body{
font:300 14px/21px 'Roboto', 'sans-serif';
color:#696e6e;
background:#232830;
letter-spacing: 0.1px;
overflow-x: hidden;
-webkit-backface-visibility:hidden;
background-attachment:fixed;
}
.d_block{
display:block;
}
.f_size_large{
font-size:1.15em;
}
.r_corners{
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
.relative{
position:relative;
}
.wrapper{
overflow: hidden;
}
.m_bottom_30{
margin-bottom:30px;
}
.f_right{
float:right;
}
::selection{
background: #e74c3c;
color:#fff;
}
::-moz-selection{
background: #e74c3c;
color:#fff;
}
::-o-selection {
background: #e74c3c;
color:#fff;
}
::-ms-selection {
background: #e74c3c;
color:#fff;
}
::-webkit-input-placeholder{
color:#696e6e;
}
::-moz-placeholder{
color:#696e6e;
opacity:1;
}
:-ms-input-placeholder {
color:#696e6e;
}
::-webkit-scrollbar{
width:10px;
background:#323a45;
}
::-webkit-scrollbar-thumb{
-webkit-border-radius:4px;
border-radius:4px;
}
/* -----------------------------------
3. Color Scheme
------------------------------------- */
a,a[class*="color"]:not(.color_light):hover,.scheme_color{
color:#e74c3c;
}
::-webkit-scrollbar-thumb{
background:#e74c3c;
}
/* -----------------------------------
4. Typography
------------------------------------- */
a{
-webkit-transition: color .4s ease, background-color .4s ease;
-moz-transition: color .4s ease, background-color .4s ease;
-o-transition: color .4s ease, background-color .4s ease;
transition: color .4s ease, background-color .4s ease;
}
a:hover,.color_dark{
color:#292f38;
}
.bg_light_color_1{
background:#ecf0f1;
}
/* -----------------------------------
10. Lists and navigations
------------------------------------- */
.categories_list .active > a > span:after{
opacity:1;
}
.categories_list .active > a > span:before,.categories_list a > span:after{
opacity:0;
}
.categories_list > li:last-child > a{
border:none;
}
.categories_list{
margin-top:-7px;
}
.categories_list a{
padding:7px 25px 7px 0;
border-bottom:1px solid #ecf0f1;
word-break:break-all;
}
.categories_list > li:last-child > a{
padding-bottom:0px;
}
.categories_list ul > li > a{
padding-left:20px;
}
.categories_list ul ul > li > a{
padding-left:40px;
}
.categories_list a > span{
display:block;
width:23px;
height:23px;
line-height: 23px;
position:absolute;
right:0;
top:50%;
margin-top:-11.5px;
}
.categories_list a > span:before,.categories_list a > span:after{
content:"";
width:9px;
height:9px;
background:url("../images/plusminus.png") no-repeat;
position: absolute;
display:block;
top:50%;
left:50%;
margin:-5px 0 0 -4px;
-webkit-transition:opacity .4s ease;
-moz-transition:opacity .4s ease;
-o-transition:opacity .4s ease;
transition:opacity .4s ease;
}
.categories_list a > span:after{
height:1px;
width:8px;
background-position: 0 -9px;
margin:-1px 0 0 -4px;
}
@media only screen and (-webkit-min-device-pixel-ratio:0){
.categories_list a > span:before,
.categories_list a > span:after{
margin-left:-5px;
}
}
/**** disabling Isotope CSS3 transitions ****/
.widget_content{
padding:23px 20px 25px;
background: #fff;
}
/* -----------------------------------
18. Responsive changes
------------------------------------- */
@media only screen and (max-width: 992px){
.widget_content{
padding-left:19px;
padding-right:19px;
}
}
@media only screen and (max-width:768px){
/* tables change*/
}
/* -----------------------------------
19. Retina ready
------------------------------------- */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144 dpi){
.categories_list a > span:before,.categories_list a > span:after{
background-image:url("../images/plusminus@2x.png");
background-size:9px 10px;
}
}
jquery
jQuery('button[type="reset"]:not(#styleswitcher button[type="reset"])').on('click',function(){
color.eq(0).addClass('active').parent().siblings().children('button').removeClass('active');
slider.slider( "option", "values", [ 0, 237 ] );
});
jQuery('.categories_list').on('click','a',function(e){
if(jQuery(this).parent().children('ul').length){
jQuery(this).parent().toggleClass('active').end().next().slideToggle();
e.preventDefault();
}
});
jQuery('.categories_list > li > a').on('click',function(e){
if(jQuery(this).parent().children('ul').length){
jQuery(this).toggleClass('scheme_color').toggleClass('color_dark');
e.preventDefault();
}
});
1 answers
solution1
0 ACCPTED 2017-08-09 02:27:35
Ok, so if i understand correctly, you only want to expand the slider when click on the + button.
Here is what i did, instead of on click the a tag, on click the span tag inside the a tag which is the plus sign, now because span is a children of the a tag, you have to add another level of parent() for slideToggle().
And then just add links to a tag like you normally would, right now it's:
<a href="#"></a>
You should change it to something like:
<a href="/contact"></a>
jQuery('.categories_list').on('click','span',function(e){ if(jQuery(this).parent().parent().children('ul').length){ jQuery(this).parent().parent().toggleClass('active').end().next().slideToggle(); e.preventDefault(); } });
*{ margin:0; padding:0; border:none; } figure{display:block} a, b, body, div, figure, html, li, span, ul{ background: transparent; border: 0 none; font-weight: inherit; margin: 0; padding: 0; border: 0; outline: 0; vertical-align: top; } a{ text-decoration:none; outline: none !important; } b{ font-weight:bold !important; } ul{ list-style: none; } html,body{ height:100%; } /* ----------------------------------- 2. Basic classes and elements ------------------------------------- */ body{ font:300 14px/21px 'Roboto', 'sans-serif'; color:#696e6e; background:#232830; letter-spacing: 0.1px; overflow-x: hidden; -webkit-backface-visibility:hidden; background-attachment:fixed; } .d_block{ display:block; } .f_size_large{ font-size:1.15em; } .r_corners{ -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; } .relative{ position:relative; } .wrapper{ overflow: hidden; } .m_bottom_30{ margin-bottom:30px; } .f_right{ float:right; } ::selection{ background: #e74c3c; color:#fff; } ::-moz-selection{ background: #e74c3c; color:#fff; } ::-o-selection { background: #e74c3c; color:#fff; } ::-ms-selection { background: #e74c3c; color:#fff; } ::-webkit-input-placeholder{ color:#696e6e; } ::-moz-placeholder{ color:#696e6e; opacity:1; } :-ms-input-placeholder { color:#696e6e; } ::-webkit-scrollbar{ width:10px; background:#323a45; } ::-webkit-scrollbar-thumb{ -webkit-border-radius:4px; border-radius:4px; } /* ----------------------------------- 3. Color Scheme ------------------------------------- */ a,a[class*="color"]:not(.color_light):hover,.scheme_color{ color:#e74c3c; } ::-webkit-scrollbar-thumb{ background:#e74c3c; } /* ----------------------------------- 4. Typography ------------------------------------- */ a{ -webkit-transition: color .4s ease, background-color .4s ease; -moz-transition: color .4s ease, background-color .4s ease; -o-transition: color .4s ease, background-color .4s ease; transition: color .4s ease, background-color .4s ease; } a:hover,.color_dark{ color:#292f38; } .bg_light_color_1{ background:#ecf0f1; } /* ----------------------------------- 10. Lists and navigations ------------------------------------- */ .categories_list .active > a > span:after{ opacity:1; } .categories_list .active > a > span:before,.categories_list a > span:after{ opacity:0; } .categories_list > li:last-child > a{ border:none; } .categories_list{ margin-top:-7px; } .categories_list a{ padding:7px 25px 7px 0; border-bottom:1px solid #ecf0f1; word-break:break-all; } .categories_list > li:last-child > a{ padding-bottom:0px; } .categories_list ul > li > a{ padding-left:20px; } .categories_list ul ul > li > a{ padding-left:40px; } .categories_list a > span{ display:block; width:23px; height:23px; line-height: 23px; position:absolute; right:0; top:50%; margin-top:-11.5px; } .categories_list a > span:before,.categories_list a > span:after{ content:""; width:9px; height:9px; background:url("http://velikorodnov.com/html/flatastic/classic/images/plusminus.png") no-repeat; position: absolute; display:block; top:50%; left:50%; margin:-5px 0 0 -4px; -webkit-transition:opacity .4s ease; -moz-transition:opacity .4s ease; -o-transition:opacity .4s ease; transition:opacity .4s ease; } .categories_list a > span:after{ height:1px; width:8px; background-position: 0 -9px; margin:-1px 0 0 -4px; } @media only screen and (-webkit-min-device-pixel-ratio:0){ .categories_list a > span:before, .categories_list a > span:after{ margin-left:-5px; } } /**** disabling Isotope CSS3 transitions ****/ .widget_content{ padding:23px 20px 25px; background: #fff; } /* ----------------------------------- 18. Responsive changes ------------------------------------- */ @media only screen and (max-width: 992px){ .widget_content{ padding-left:19px; padding-right:19px; } } @media only screen and (max-width:768px){ /* tables change*/ } /* ----------------------------------- 19. Retina ready ------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144 dpi){ .categories_list a > span:before,.categories_list a > span:after{ background-image:url("http://velikorodnov.com/html/flatastic/classic/images/plusminus@2x.png"); background-size:9px 10px; } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="sidebar nobottommargin"> <!--Categories--> <div class="menu-header">Categories</div> <figure class="widget shadowonly r_corners wrapper m_bottom_30"> <div class="widget_content"> <!--Categories list--> <ul class="categories_list"> <li class="active"> <a href="#" class="f_size_large scheme_color d_block relative"> <b>Top Level Category</b> <span class="bg_light_color_1 r_corners f_right color_dark talign_c"></span> </a> <!--second level--> <ul> <li class="active"> <a href="#" class="d_block f_size_large color_dark relative"> Sub Category<span class="bg_light_color_1 r_corners f_right color_dark talign_c"></span> </a> <!--third level--> <ul> <li><a href="#" class="color_dark d_block">Sub Sub Category</a></li> <li><a href="#" class="color_dark d_block">Sub Sub Category</a></li> <li><a href="#" class="color_dark d_block">Sub Sub Category</a></li> </ul> </li> <li> <a href="#" class="d_block f_size_large color_dark relative"> Sub Category<span class="bg_light_color_1 r_corners f_right color_dark talign_c"></span> </a> <!--third level--> <ul> <li><a href="#" class="color_dark d_block">Sub Sub Category</a></li> <li><a href="#" class="color_dark d_block">Sub Sub Category</a></li> <li><a href="#" class="color_dark d_block">Sub Sub Category</a></li> </ul> </li> <li> <a href="#" class="d_block f_size_large color_dark relative"> Sub Category<span class="bg_light_color_1 r_corners f_right color_dark talign_c"></span> </a> <!--third level--> <ul> <li><a href="#" class="color_dark d_block">Sub Sub Category</a></li> <li><a href="#" class="color_dark d_block">Sub Sub Category</a></li> <li><a href="#" class="color_dark d_block">Sub Sub Category</a></li> </ul> </li> </ul> </li> </ul> </div> </figure> </div>
Update, to only show the first and second level, set style="display:none" to third level list and set class active on first level li only
jQuery('.categories_list').on('click','span',function(e){ if(jQuery(this).parent().parent().children('ul').length){ jQuery(this).parent().parent().toggleClass('active').end().next().slideToggle(); e.preventDefault(); } });
*{ margin:0; padding:0; border:none; } figure{display:block} a, b, body, div, figure, html, li, span, ul{ background: transparent; border: 0 none; font-weight: inherit; margin: 0; padding: 0; border: 0; outline: 0; vertical-align: top; } a{ text-decoration:none; outline: none !important; } b{ font-weight:bold !important; } ul{ list-style: none; } html,body{ height:100%; } /* ----------------------------------- 2. Basic classes and elements ------------------------------------- */ body{ font:300 14px/21px 'Roboto', 'sans-serif'; color:#696e6e; background:#232830; letter-spacing: 0.1px; overflow-x: hidden; -webkit-backface-visibility:hidden; background-attachment:fixed; } .d_block{ display:block; } .f_size_large{ font-size:1.15em; } .r_corners{ -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; } .relative{ position:relative; } .wrapper{ overflow: hidden; } .m_bottom_30{ margin-bottom:30px; } .f_right{ float:right; } ::selection{ background: #e74c3c; color:#fff; } ::-moz-selection{ background: #e74c3c; color:#fff; } ::-o-selection { background: #e74c3c; color:#fff; } ::-ms-selection { background: #e74c3c; color:#fff; } ::-webkit-input-placeholder{ color:#696e6e; } ::-moz-placeholder{ color:#696e6e; opacity:1; } :-ms-input-placeholder { color:#696e6e; } ::-webkit-scrollbar{ width:10px; background:#323a45; } ::-webkit-scrollbar-thumb{ -webkit-border-radius:4px; border-radius:4px; } /* ----------------------------------- 3. Color Scheme ------------------------------------- */ a,a[class*="color"]:not(.color_light):hover,.scheme_color{ color:#e74c3c; } ::-webkit-scrollbar-thumb{ background:#e74c3c; } /* ----------------------------------- 4. Typography ------------------------------------- */ a{ -webkit-transition: color .4s ease, background-color .4s ease; -moz-transition: color .4s ease, background-color .4s ease; -o-transition: color .4s ease, background-color .4s ease; transition: color .4s ease, background-color .4s ease; } a:hover,.color_dark{ color:#292f38; } .bg_light_color_1{ background:#ecf0f1; } /* ----------------------------------- 10. Lists and navigations ------------------------------------- */ .categories_list .active > a > span:after{ opacity:1; } .categories_list .active > a > span:before,.categories_list a > span:after{ opacity:0; } .categories_list > li:last-child > a{ border:none; } .categories_list{ margin-top:-7px; } .categories_list a{ padding:7px 25px 7px 0; border-bottom:1px solid #ecf0f1; word-break:break-all; } .categories_list > li:last-child > a{ padding-bottom:0px; } .categories_list ul > li > a{ padding-left:20px; } .categories_list ul ul > li > a{ padding-left:40px; } .categories_list a > span{ display:block; width:23px; height:23px; line-height: 23px; position:absolute; right:0; top:50%; margin-top:-11.5px; } .categories_list a > span:before,.categories_list a > span:after{ content:""; width:9px; height:9px; background:url("http://velikorodnov.com/html/flatastic/classic/images/plusminus.png") no-repeat; position: absolute; display:block; top:50%; left:50%; margin:-5px 0 0 -4px; -webkit-transition:opacity .4s ease; -moz-transition:opacity .4s ease; -o-transition:opacity .4s ease; transition:opacity .4s ease; } .categories_list a > span:after{ height:1px; width:8px; background-position: 0 -9px; margin:-1px 0 0 -4px; } @media only screen and (-webkit-min-device-pixel-ratio:0){ .categories_list a > span:before, .categories_list a > span:after{ margin-left:-5px; } } /**** disabling Isotope CSS3 transitions ****/ .widget_content{ padding:23px 20px 25px; background: #fff; } /* ----------------------------------- 18. Responsive changes ------------------------------------- */ @media only screen and (max-width: 992px){ .widget_content{ padding-left:19px; padding-right:19px; } } @media only screen and (max-width:768px){ /* tables change*/ } /* ----------------------------------- 19. Retina ready ------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144 dpi){ .categories_list a > span:before,.categories_list a > span:after{ background-image:url("http://velikorodnov.com/html/flatastic/classic/images/plusminus@2x.png"); background-size:9px 10px; } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="sidebar nobottommargin"> <!--Categories--> <div class="menu-header">Categories</div> <figure class="widget shadowonly r_corners wrapper m_bottom_30"> <div class="widget_content"> <!--Categories list--> <ul class="categories_list"> <li class="active"> <!-- class active --> <a href="#" class="f_size_large scheme_color d_block relative"> <b>Top Level Category</b> <span class="bg_light_color_1 r_corners f_right color_dark talign_c"></span> </a> <!--second level--> <ul> <li> <a href="#" class="d_block f_size_large color_dark relative"> Sub Category<span class="bg_light_color_1 r_corners f_right color_dark talign_c"></span> </a> <!--third level--> <ul style="display:none;"> <!-- display none --> <li><a href="#" class="color_dark d_block">Sub Sub Category</a></li> <li><a href="#" class="color_dark d_block">Sub Sub Category</a></li> <li><a href="#" class="color_dark d_block">Sub Sub Category</a></li> </ul> </li> <li> <a href="#" class="d_block f_size_large color_dark relative"> Sub Category<span class="bg_light_color_1 r_corners f_right color_dark talign_c"></span> </a> <!--third level--> <ul style="display:none;"> <!-- display none --> <li><a href="#" class="color_dark d_block">Sub Sub Category</a></li> <li><a href="#" class="color_dark d_block">Sub Sub Category</a></li> <li><a href="#" class="color_dark d_block">Sub Sub Category</a></li> </ul> </li> <li> <a href="#" class="d_block f_size_large color_dark relative"> Sub Category<span class="bg_light_color_1 r_corners f_right color_dark talign_c"></span> </a> <!--third level--> <ul style="display:none;"> <!-- display none --> <li><a href="#" class="color_dark d_block">Sub Sub Category</a></li> <li><a href="#" class="color_dark d_block">Sub Sub Category</a></li> <li><a href="#" class="color_dark d_block">Sub Sub Category</a></li> </ul> </li> </ul> </li> </ul> </div> </figure> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Collapse/Expand Accordion on Button Click
Expand and close accordion bootstrap
React - creating accordion with bootstrap doesnt expand/close on click
Collapse / Expand accordion menu
Accordion menu expand - menu change
Accordion menu open and close
Close accordion on second click
CSS Accordion Close On Click
Open accordion on click, close accordion on second click
Open/close mobile menu on other button click
Related Tags