Home › Forums › Porto – Responsive HTML5 Template › Want to toggle left sidebar (collapse and expand child li)
- This topic has 5 replies, 2 voices, and was last updated 6 years, 4 months ago by Support2. This post has been viewed 2923 times
-
AuthorPosts
-
November 1, 2017 at 11:54 pm #10023314sajib_uitParticipant
Hi experts,
I want to toggle left side bar which resides Pages–> Layouts–> Left Sidebar page. That means, if i click on any parent li which have child li’s then the child list will collapse and expand. If one parent li expand then the other expanded will collapse automatically.
Will appreciate your solution.Thanks
November 2, 2017 at 5:45 am #10023316Support2KeymasterHello, thanks for your purchase.
You can do it with the code below, please add in (js/custom.js):
$('.collapsable-list li a').on('click', function(){ $('.collapsable-list').find('a').next().collapse('hide'); $(this).next().collapse('toggle'); });
You need the HTML of list with that structure and classes:
<div class="row"> <div class="col-md-3"> <aside class="sidebar"> <h4 class="heading-primary">Categories</h4> <ul class="nav nav-list mb-xlg collapsable-list"> <li><a href="#">Design (2)</a></li> <li class="active"> <a href="#">Photos (4)</a> <ul class="collapse"> <li><a href="#">Animals</a></li> <li class="active"><a href="#">Business</a></li> <li><a href="#">Sports</a></li> <li><a href="#">People</a></li> </ul> </li> <li> <a href="#">Videos (3)</a> <ul class="collapse"> <li><a href="#">Animals</a></li> <li class="active"><a href="#">Business</a></li> <li><a href="#">Sports</a></li> <li><a href="#">People</a></li> </ul> </li> <li><a href="#">Lifestyle (2)</a></li> <li><a href="#">Technology (1)</a></li> </ul> .... ... .. .
* Note the class
collapsable-list
.Please, try that and let me know if you need further assistance.
Kind Regards,
Rodrigo.
November 2, 2017 at 6:33 pm #10023318sajib_uitParticipantThanks… It worked fine.
More I need to keep all the parent li collapsed except the only parent li expanded which child li have “active” class.
Thanks again.
November 3, 2017 at 10:42 pm #10023335Support2KeymasterHello,
If you want the active item expanded when the page loads, just add the class
collpase in
on the active list item. Like the example below:<ul class="nav nav-list mb-xlg collapsable-list"> <li><a href="#">Design (2)</a></li> <li class="active"> <a href="#">Photos (4)</a> <ul class="collapse in"> <li><a href="#">Animals</a></li> <li class="active"><a href="#">Business</a></li> <li><a href="#">Sports</a></li> <li><a href="#">People</a></li> </ul> </li> <li> <a href="#">Videos (3)</a> <ul class="collapse"> <li><a href="#">Animals</a></li> <li class="active"><a href="#">Business</a></li> <li><a href="#">Sports</a></li> <li><a href="#">People</a></li> </ul> </li> <li><a href="#">Lifestyle (2)</a></li> <li><a href="#">Technology (1)</a></li> </ul>
Please, try that and let me know if you need further assistance.
Kind Regards,
Rodrigo.
November 9, 2017 at 6:11 pm #10023404sajib_uitParticipantHello concerned,
I want to use jquey auto-complete(suggest names while writing in text box) in text boxes. how can i do that.
I would like to implement that in below link:http://lms.acckeepers.com//LMS_HTML/index.html
November 9, 2017 at 10:20 pm #10023412Support2KeymasterHello,
Porto HTML doesn’t come with the “auto-complete” feature, so unfortunately we can not support it.
But i found this tutorial on google that can help you with that:
https://designshack.net/articles/javascript/create-a-simple-autocomplete-with-html5-jquery/I hope that help you.
Kind Regards,
Rodrigo.
-
AuthorPosts
This topic is marked as "RESOLVED" and can not rceive new replies.