Link to home
Start Free TrialLog in
Avatar of Eduardo Fuerte
Eduardo FuerteFlag for Brazil

asked on

Could you point how to give Bootstrap's open/ close menu effect ?

Hi Experts

Could you point how to give Bootstrap's open/ close menu effect ?

Accordingly to:  

User generated image
Opened:
User generated image
Desired effect In this static menu:
User generated image
View code:
<!-- Start: Sidebar -->
<aside id="sidebar_left" class="nano nano-light affix">

<!-- glyphicons CSS -->
<script src="<?php echo base_url();?>/public/assets/admin-tools/admin-forms/js/jquery.validate.min.js"></script>

    <!-- Start: Sidebar Left Content -->
    <div class="sidebar-left-content nano-content">

        <!-- Start: Sidebar Header -->
        <header class="sidebar-header bg-projeto">
            
            <!-- Sidebar Widget - Author -->
            <div class="sidebar-widget author-widget">
                <div class="media">
                    <a class="media-left projeto-cursor-pointer">
                        <img src="<?php echo ($image_path = $this->session->userdata('image_path')) ? base_url($image_path) : base_url('undefined.jpg');?>" class="img-responsive">
                    </a>
                    <div class="media-body">
                        <div class="media-links">
                            <a href="#" class="sidebar-menu-toggle">Meu Menu</a>
                            <a href="<?php echo site_url('../auth/logout/');?>">
                                Sair
                            </a><br>
                        </div>
                        <div class="media-author">
                            <?php echo $this->session->userdata('full_name');?>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sidebar Widget - Menu (slidedown) -->
            <div class="sidebar-widget menu-widget mt20">
                <div class="row text-center mbn">

                    <div class="col-xs-4">
                        <a class="text-info trocar_senha projeto-cursor-pointer" data-toggle="tooltip" data-placement="top" title="Mudar Senha">
                            <span class="glyphicons glyphicons-keys"></span>
                        </a>
                    </div>

                    <div class="col-xs-4">
                        <a class="text-info editar_avatar projeto-cursor-pointer" data-toggle="tooltip" data-placement="top" title="Mudar Foto">
                            <span class="glyphicons glyphicons-camera"></span>
                        </a>
                    </div>

                </div>
            </div>

            <!-- Sidebar Widget - Search (hidden) -->
            <div class="sidebar-widget search-widget hidden">
                <div class="input-group">
                    <span class="input-group-addon">
                        <i class="fa fa-search"></i>
                    </span>
                    <input type="text" id="sidebar-search" class="form-control" placeholder="Search...">
                </div>
            </div>

        </header>
        <!-- End: Sidebar Header -->

        <!-- Start: Sidebar Menu -->
        <ul class="nav sidebar-menu">
            <li class="sidebar-label pt20">Menu</li>
        
            <li>
                <a href="<?php echo base_url('reclamacao'); ?>">
                    <span class="fa fa-phone"></span>
                    <span class="sidebar-title">Abertura de Reclamação</span>
                    <span class="sidebar-title-tray">
                    </span>
                </a>
            </li>
            <li>
                <a href="<?php echo base_url('reembolso'); ?>">
                    <span class="fa fa-money"></span>
                    <span class="sidebar-title">Solicitação de Reembolso</span>
                    <span class="sidebar-title-tray">
                    </span>
                </a>
            </li>
            
            <hr />
            
            <li>
                <!--EF Dez/2016 -  Cadastro de Clientes -->
                <a href="<?php echo base_url('seguradora'); ?>">
                    <span class="fa fa-institution"></span>
                    <span class="sidebar-title">Cadastro de Clientes</span>
                    <span class="sidebar-title-tray">
                    </span>
                </a>
            </li>
            
            <li>
                <!--EF Dez/2016 -  Cadastro de Produtos -->
                <a href="<?php echo base_url('cliente'); ?>">
                    <span class="fa fa-folder-open-o"></span>
                    <span class="sidebar-title">Cadastro de Produtos</span>
                    <span class="sidebar-title-tray">
                    </span>
                </a>
            </li>
            
              <li>
                <!--EF Dez/2016 -  Cadastro de Sub-Produtos -->
                <a href="<?php echo base_url('sub_produto'); ?>">
                    <span class="fa fa-folder-o"></span>
                    <span class="sidebar-title">Cadastro de Sub-Produtos</span>
                    <span class="sidebar-title-tray">
                    </span>
                </a>
            </li>
                   
             <li>
                <!--EF Dez/2016 -  Cadastro de Prestadores -->
                <a href="<?php echo base_url('prestador'); ?>">
                    <span class="fa fa-group"></span>
                    <span class="sidebar-title">Cadastro de Prestadores</span>
                    <span class="sidebar-title-tray">
                    </span>
                </a>
            </li>
            
            <li>
                <!--EF Dez/2016 -  Cadastro de Serviços -->
                <a href="<?php echo base_url('servico'); ?>">
                    <span class="fa fa-gears"></span>
                    <span class="sidebar-title">Cadastro de Serviços</span>
                    <span class="sidebar-title-tray">
                    </span>
                </a>
            </li>

       ...
    

        </ul>

 
        
        <!-- End: Sidebar Menu -->

    </div>
    <!-- End: Sidebar Left Content -->

</aside>
<!-- End: Sidebar Left -->

Open in new window


Could you suggest what's needed to have this effect apllyed ?

Thanks in advance!
SOLUTION
Avatar of zephyr_hex (Megan)
zephyr_hex (Megan)
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Marco Gasi
You might consider to read this article which explain how to create an accordion with just few lines of code: https://www.experts-exchange.com/articles/21219/The-simplest-jQuery-Accordion-ever.html
Avatar of Eduardo Fuerte

ASKER

Hi

Thanks for replies.

Closer to the needs.

After adapting the code, I obtained this:

User generated image
User generated image
Could you point how to mantain the same font color, distance from lateral than pointed ( Abertura de Reclamação) - and make the icon to be horizontal when closed ?
For color and distances is just plain css: if you have mantained my article id
#mg-accordion li a{
    color: #fff !important;
    margin-left: 20px; // or so...
    font-weight: bold; // I guess
}

Open in new window


What do you mean saying you get the icon horizontal? Maybe you can rotate it using jQuery, but I don't have a quick example now. But first explain what you mean by 'horizontal', please.
The horizontal icon appear when the menu is closed:

User generated image
After the changes you suggested:

User generated image
Just the "acordion" menu title: Cadastros Básicos - still must to be adapted.

I guess the horizontal icon is related to:

-- Icon when the menu is opened?
.accordion-opened .accordion-toggle:after {
  content: "\f054";
}

-- Maybe here ????
.accordion-closed .accordion-toggle:after {
  content: "\f055";
}

Open in new window

Please, show me the markup for accordion: I really can't guess how the "acordion" menu title: Cadastros Básicos can be accessed by css if I don't see the markup.

For the icon, I suppose you have that icon for each list item with class 'dropdown' (accordingly to my mg-accordion: otherwise post here your code so I can see the changes you did).
If so, you just have to add some line to change the icon:
dropdowns.on('click', function (e) {
    //prevent default behavior
    e.preventDefault();

    //code for the icon
    if ($(this).hasClass('accordion-open')){
       $(this).removeClass('accordion-open').addClass('accordion-closed');
    }else{
       $(this).removeClass('accordion-closed').addClass('accordion-open');
    }


    // we are clicking on an anchor within a list item
    // so we find all ul.submenu elements which are
    // children of any list item which stays at the
    // same level of its parent
    var items = $(this).parents().siblings().find('ul.submenu');
    // for each found ul element we do the following
    items.each(function () {
        if ($(this).is(':visible')) {
            $(this).slideUp('slow');
        }
    });
    // show and hide lists
    $(this).siblings('ul.submenu').slideToggle();
});

Open in new window

Here it is:

<style>
.accordion-toggle:after {
  font-family: 'FontAwesome';
  content: "\f078";
  float: right;
}

.accordion-opened .accordion-toggle:after {
  content: "\f054";
}

// Just a guess....
.accordion-closed .accordion-toggle:after {
  content: "\f055";
}


.accordion li a{
    color: #fff !important;
    margin-left: 20px; 
}

</style>
   
<div class="accordion" id="accordion2">
<div class="accordion-group">
		<div class="accordion-heading">
			 <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
				Cadastros Básicos
			</a>
		</div>
		
			<div id="collapseOne" class="accordion-body collapse">
			  <div class="accordion-inner">
				 <li>
					<!--EF Dez/2016 -  Cadastro de Clientes -->
					<a href="<?php echo base_url('seguradora'); ?>">
						<span class="fa fa-institution"></span>
						<span class="sidebar-title">Cadastro de Clientes</span>
						<span class="sidebar-title-tray">
						</span>
					</a>
				</li>
			  </div>
			  
			  <div class="accordion-inner">
				<li>
					<!--EF Dez/2016 -  Cadastro de Produtos -->
					<a href="<?php echo base_url('cliente'); ?>">
						<span class="fa fa-folder-open-o"></span>
						<span class="sidebar-title">Cadastro de Produtos</span>
						<span class="sidebar-title-tray">
						</span>
					</a>
				</li>
			  </div>
			  
			  <div class="accordion-inner">
				<li>
					<!--EF Dez/2016 -  Cadastro de Sub-Produtos -->
					<a href="<?php echo base_url('sub_produto'); ?>">
						<span class="fa fa-folder-o"></span>
						<span class="sidebar-title">Cadastro de Sub-Produtos</span>
						<span class="sidebar-title-tray">
						</span>
					</a>
				</li>
			  </div>
			  
			  <div class="accordion-inner">
				<li>
					<!--EF Dez/2016 -  Cadastro de Prestadores -->
					<a href="<?php echo base_url('prestador'); ?>">
						<span class="fa fa-group"></span>
						<span class="sidebar-title">Cadastro de Prestadores</span>
						<span class="sidebar-title-tray">
						</span>
					</a>
				</li>
			  </div>
			  
			  <div class="accordion-inner">
				  <li>
					<!--EF Dez/2016 -  Cadastro de Serviços -->
					<a href="<?php echo base_url('servico'); ?>">
						<span class="fa fa-gears"></span>
						<span class="sidebar-title">Cadastro de Serviços</span>
						<span class="sidebar-title-tray">
						</span>
					</a>
				</li>
			  </div>
			  
			  
			....
			  
			  
			  
			</div>
	</div>

</div>

Open in new window

Ah, you're not using my code... Ok, then add an event handler for class accordion-toggle
$('.accordion-toggle').click(function(){
    if ($(this).hasClass('accordion-open')){
       $(this).removeClass('accordion-open').addClass('accordion-closed');
    }else{
       $(this).removeClass('accordion-closed').addClass('accordion-open');
    }
});

Open in new window

This should do the trick.
Mario

Your last code is running ok - accordingly with logs I checked.

But the icons still don't changes.

Maybe it's a matter of css incorrect declarations, could you check?

.accordion-opened .accordion-toggle:after {
  content: "\f054";
}
  
.accordion-closed .accordion-toggle:after {
  content: "\e080";
}

Open in new window

Look at this page: http://astronautweb.co/snippet/font-awesome/
fa-chevron-right (accordion-closed) should be "\f054" and fa-chevron-down (accordion-open) should be "\f078"
Ok, for the icons, I could adapt it later to the more adequated.

My doubt is about CSS code used to the classes, since the icons doesn't changes even if the code runs...

<script type="text/javascript">
    $('.accordion-toggle').click(function(){
        
         console.log('teste xyz');  //Ok
         
         
    if ($(this).hasClass('accordion-open')){
        
         console.log('teste open'); //Ok
       $(this).removeClass('accordion-open').addClass('accordion-closed');
    }else{
        
       console.log('teste close'); //Ok
       
       $(this).removeClass('accordion-closed').addClass('accordion-open');
    }
});
</script>

Open in new window


User generated image
Sorry, class is accordion-opened, not accordion-open... Try the correct class, please.
Ok.

Even after this correction the icon doesn't changes...

<script type="text/javascript">
    $('.accordion-toggle').click(function(){
         
         
    if ($(this).hasClass('accordion-opened')){
        
         console.log('teste open'); //Ok
       $(this).removeClass('accordion-opened').addClass('accordion-closed');
    }else{
        
       console.log('teste close'); //Ok
       
       $(this).removeClass('accordion-closed').addClass('accordion-opened');
    }
});
</script>

Open in new window


User generated image
But really, Marco

The most important thing was done... this part, icon changes, is only an accessory.
Ok, but if you had a link to a live page I would like to understand what's going wrong... I hate bugs :)
Unfortunatelly it's an intranet site.

I guess this bug is someway related to how CSS classes is coded....
I understood the issue. We have to append the class to the patent element accordion-heading. From mobile is not comfortable. I'll give you the code later. Something like
$(this).parent('accordion-heading').addClass... You have to rewrite the event handler following this suggestion. Otherwise be patient and wait for me :)
I have to go.
Of course, Marco

I can wait the necessary time for you!
Sorry, I'm still on mobile, but you can try this:
<script type="text/javascript">
    $('.accordion-toggle').click(function(){
         
       var p = $(this).parent('accordion-heading');  
    if (p.hasClass('accordion-opened')){
        
         console.log('teste open'); //Ok
       p.removeClass('accordion-opened').addClass('accordion-closed');
    }else{
        
       console.log('teste close'); //Ok
       
       p.removeClass('accordion-closed').addClass('accordion-opened');
    }
});
</script>

Open in new window

Hi Marco

Still doesn't work out...
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Perfect!!!

User generated image
User generated image
Marco

Thank you very, very much for your dedication and expertise in this question!