Search code examples
jqueryhtmltwitter-bootstraphrefdropdown

Expand multiple dropdown menus using a href link

In my header nav, I have 3 dropdown toggles which I am hoping to be able to expand by allow the user to click on a href link?

Here is my dropdown Nav code:

<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
    <i class="fa fa-question-circle fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>

<ul class="dropdown-menu dropdown-alerts">
    <div class="" style="overflow-y: scroll;height:385px;width:350px; padding-left:0.5cm">
        <b>Support</b> Tickets
        <li class="divider"></li>
        <li>
            <a class="text-center" href="messages.php?show=support">
                <strong>See All Open Tickets</strong><i class="fa fa-angle-right"></i>
            </a>
        </li> 
    </div>
</ul>

Is there a way I can open this when a user clicks a link located somewhere else on the page, such as:

<a href="#dropdown-toggle">Open Dropdown</a>

Or something similar?

Solution

  • Your code looks a little strange, but I'll just give you a general idea.

    HTML

    <a href="#" id="open">Open Dropdowns</a>

    JS

    $('#open').onclick(function(){
    $('.dropdown-toggle').click();
});

    What the javascript does is that, when you click on an element with the ID "open", it will simulate a click on all elements with the class "dropdown-toggle". This is the easy method, hopefully this will work for you.