SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    289
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Good solution for this? jquery toggle on click.

    I have a big meny something like this:

    Code HTML4Strict:
    <ul>
    <li><button>Matrum</button>
     
    								<div class="drop-down-main">
    									<div class="wrapper">
     
    									</div>
    								</div>
     
    							</li>
    							<li><button>Sovrum</button>
     
    								<div class="drop-down-main">
    									<div class="wrapper">
     
    									</div>
    								</div>
     
    							</li>
    							<li><button>Hall</button>
     
    								<div class="drop-down-main">
    									<div class="wrapper">
     
    									</div>
    								</div>
     
    							</li>
    							<li><button>Allt sortiment</button>
     
    								<div class="drop-down-main">
    									<div class="wrapper">
     
    									</div>
    								</div>
     
    							</li>
    </ul>

    And I want to toggle the drop-down menus on click. What is the best way to this?

    Code JavaScript:
    $('button').click(function() {
    $('.drop-down-main').toggle('fast');
    });

    This would show all drop downs i guess, is it possible to do this in some clean and nice way? I made this in an ugly way before where i gave all buttons and drop downs different id's, and then did something like:

    Code JavaScript:
    $('#button1').click(function() {
    $('#drop-down1').toggle('fast');
    $('#drop-down2').hide();
    $('#drop-down3').hide();
    $('#drop-down4').hide();
    $('#drop-down5').hide();
    });

    and then repeated this for every button.

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,013
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Sure you can

    The first thing to realise is that the button you click on can be referenced using this within the callback.
    Once you know that you can do groovy stuff, such as just toggle the visibility of the next element:

    Code:
    $('button').click(function() {
        $(this).next().toggle('fast');
    });
    fiddle

  3. #3
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    289
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Sure you can

    The first thing to realise is that the button you click on can be referenced using this within the callback.
    Once you know that you can do groovy stuff, such as just toggle the visibility of the next element:

    Code:
    $('button').click(function() {
        $(this).next().toggle('fast');
    });
    fiddle
    Wonderful, thanks!=)

    Is there any way to modifiy this so that it also closes already opened sub-menus?

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,013
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    You could do something like this:

    Code:
    $('button').click(function() {
        if ($(".drop-down-main").is(":visible")){
            $(".drop-down-main").slideUp();
        }
        $(this).next().toggle('fast');
    });


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •