jQuery Toggle Dropdown Menu

Question

How could I write a section of jQuery so that when Trials is clicked that it will show the dropdown menu options:

Update:

jQuery(document).ready(function () {

    $("a[href='http://sheep.local/cms/trials']").click(function(e){
        e.preventDefault(); // In case you don't want the link to open...
        $(this).next('ul').slideToggle();
    });
});

HTML:

       <div id="mainnavwrap">
            <div id="mainnav" class="clearfix">
    <ul class="menu">
    <li class="first current">
        <a href="http://sheep.local/cms/home">Home</a>
    </li>
    <li>
        <a href="http://sheep.local/cms/features">Features</a>
    </li>
    <li>
        <a href="http://sheep.local/cms/options">Options</a>
    </li>
    <li>
        <a href="http://sheep.local/cms/pumps-motors">Pumps & Motors</a>
    </li>
    <li>
        <a href="http://sheep.local/cms/shows">Shows</a>
    </li>
    <li>
        <a href="http://sheep.local/cms/trials">Trials</a>
        <ul>
            <li class="first">
                <a href="http://sheep.local/cms/trials/mathews-trial">Mathews Trial</a>
            </li>
            <li>
                <a href="http://sheep.local/cms/trials/novatis-trial">Novatis Trial</a>
            </li>
            <li>
                <a href="http://sheep.local/cms/trials/waimati-vet-trial">Waimati Vet Trial</a>
            </li>
            <li class="last">
                <a href="http://sheep.local/cms/trials/uk-scab-mite-trial">UK Scab Mite Trial</a>
            </li>
        </ul>
    </li>
    <li class="last">
        <a href="http://sheep.local/cms/contact">Contact</a>
    </li>

    </ul>
</div>
          </div>

CSS:

#wrapper #contentarea #blue_box .centerblue_txt ul li ul{
    width:190px;
    padding:5px 0 0 10px;
    display:none;
}
#wrapper #contentarea #blue_box .centerblue_txt ul li ul li{
    width:185px;
    padding:5px 0 5px 5px;
    border-top:1px dotted #424242;
    border-bottom:0px;
}
#wrapper #contentarea #blue_box .centerblue_txt ul li ul li a,
#wrapper #contentarea #blue_box .centerblue_txt ul li ul li a{
    width:180px;
    padding:0 0 0 10px;
    font-size:12px;
    background:url(../img/liBullets.gif) no-repeat left 4px;
}
#wrapper #contentarea #blue_box .centerblue_txt ul li ul li#current a,
#wrapper #contentarea #blue_box .centerblue_txt ul li ul li a:hover{
    color:#D1D1D1;
    background:url(../img/liBullets.gif) no-repeat left 4px;
}
#wrapper #contentarea #blue_box .centerblue_txt ul li a:hover, 
#wrapper #contentarea #blue_box .centerblue_txt ul li a:active {
    background:#5490f3;
}

Bram Vanroy · Accepted Answer · 2012-03-18 19:47:43Z

1

Take a look at this piece of code: http://jsfiddle.net/G9kda/6/ Click 'deelnemers' for the desired effect.

EDIT: I adjusted it to your code: http://jsfiddle.net/hXNnD/1/

answered Mar 18, 2012 at 19:47

Bram Vanroy

28.8k29 gold badges151 silver badges266 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alejandro Urbano Alvarez · Accepted Answer · 2012-03-18 20:03:17Z

0

You could use something like this (Only for Trials)

$("a[href='http://sheep.local/cms/trials']").click(function(e){
    e.preventDefault(); // In case you don't want the link to open...
    $(this).nextAll('ul').slideToggle();
});

edited Mar 18, 2012 at 20:03

answered Mar 18, 2012 at 19:48

Alejandro Urbano Alvarez

3,3361 gold badge27 silver badges39 bronze badges

3 Comments

Jess McKenzie Over a year ago

Hey, I have included that in a sep js using the updated code in my question but it does not seem to be loading or working. Any Ideas?

Alejandro Urbano Alvarez Over a year ago

You are right, there seems to be a problem with the .next('ul') not selecting the appropriate element, try using .nextAll instead

Bram Vanroy Over a year ago

Also you might wanna use jQuery 1.7 instead of 1.6.

Collectives™ on Stack Overflow

jQuery Toggle Dropdown Menu

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related