Want to toggle left sidebar (collapse and expand child li)

Home Forums Porto – Responsive HTML5 Template Want to toggle left sidebar (collapse and expand child li)

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #10023314
    sajib_uit
    Participant

    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


    #10023316
    Support2
    Keymaster

    Hello, 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.


    #10023318
    sajib_uit
    Participant

    Thanks… 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.


    #10023335
    Support2
    Keymaster

    Hello,

    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.


    #10023404
    sajib_uit
    Participant

    Hello 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


    #10023412
    Support2
    Keymaster

    Hello,

    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.


Viewing 6 posts - 1 through 6 (of 6 total)

This topic is marked as "RESOLVED" and can not rceive new replies.