drop down list in jquery

Question

<div class="header-inner">
   <a href="" class="btn-link icon-set menu-hambuger-plus m-l-20 sm-no-margin hidden-sm hidden-xs dropdown-toggle"  data-toggle="quickview" data-toggle-element="#quickview"></a>
</div>



<div id="quickview" class="quickview-wrapper">
    <ul class="nav nav-tabs" >
        <li class="">
            <a href="#quickview-notes" data-toggle="tab">Notes</a>
        </li>
        <li>
            <a href="#quickview-alerts" data-toggle="tab">Alerts</a>
        </li>
        <li class="active">
            <a href="#quickview-chat" data-toggle="tab">Chat</a>
        </li>
    </ul>
</div>


$(function(){
    $('#quickview').on('click',function(){
        $(this).find('ul').toggle();
    });
});

When I click the icon it should display the list in #quickview. When I click the icon it goes to #quickview but it is not toggling the list.

Answer 1

I might be missing something - the jQuery just isn't showing the ul?

If so, I believe it's because your targeting is incorrect.

$(function(){
    $('#quickview').click(function(){
        $(this).find('ul').toggle();
    });
});

Answer 2

From your incomplete example, I deduce you're trying to control a tabbed section display from a dropdown element, using Bootstrap v4.

First of all, I must warn you it's a bad idea from usability point of view (most users will not understand that's a tabbed area and will never get to see what's inside the hidden tabs, because they won't open the dropdown.

To make it work, you don't need any custom JavaScript, it's already provided by Bootstrap, as long as you pay attention to their markup:

 head + body { background-color: #f8f8f8; } .tab-content { background-color: white; border: solid #ddd; border-width: 0 1px 1px; border-radius: 0 0 4px 4px; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> <div class="container"> <div class="row mt-3"> <div class="col"> <ul class="nav nav-tabs"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle active" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Select section</a> <div class="dropdown-menu"> <a class="dropdown-item active" href="#one" id="tab-1" data-toggle="tab" role="tab" aria-controls="one" aria-selected="false">Section 1</a> <a class="dropdown-item" href="#two" id="tab-2" data-toggle="tab" href="#two" role="tab" aria-controls="twp" aria-selected="false">Section 2</a> <a class="dropdown-item" href="#three" id="tab-3" data-toggle="tab" href="#three" role="tab" aria-controls="three" aria-selected="false">Section 3</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#last" id="tab-4" data-toggle="tab" href="#last" role="tab" aria-controls="last" aria-selected="false">Last section</a> </div> </li> </ul> </div> </div> <div class="tab-content p-3"> <div class="tab-pane fade show active" id="one" role="tabpanel" aria-labelledby="tab-1"> <p class="lead">Section 1 <p>Lorem ipsum dolor amet actually selfies iPhone, kinfolk polaroid cold-pressed direct trade pug umami bitters. Direct trade readymade viral, occupy fingerstache pickled actually wayfarers waistcoat whatever succulents. Pinterest mlkshk hell of brooklyn typewriter glossier farm-to-table occupy hoodie edison bulb. Trust fund truffaut pickled fixie, single-origin coffee tumeric cardigan gluten-free schlitz. Ugh quinoa single-origin coffee, ethical waistcoat art party biodiesel activated charcoal. </div> <div class="tab-pane fade" id="two" role="tabpanel" aria-labelledby="tab-2"> <p class="lead">Section 2 <p>Listicle umami neutra, keytar man braid copper mug try-hard thundercats trust fund mixtape fanny pack. 90's you probably haven't heard of them tofu, tumblr umami stumptown freegan kickstarter typewriter keytar. Franzen food truck prism vice. Fashion axe fanny pack food truck flannel thundercats, subway tile XOXO kogi next level air plant pok pok. Tumblr marfa tumeric, four loko sriracha direct trade lumbersexual flexitarian vape selvage. </div> <div class="tab-pane fade" id="three" role="tabpanel" aria-labelledby="tab-3"> <p class="lead">Section 3 <p>Af XOXO biodiesel succulents live-edge fashion axe paleo poutine. Street art jianbing 8-bit echo park unicorn trust fund plaid austin lyft actually. Hella tacos selfies, twee normcore locavore coloring book banh mi. Farm-to-table pinterest gentrify glossier whatever enamel pin intelligentsia sustainable green juice selvage readymade. </div> <div class="tab-pane fade" id="last" role="tabpanel" aria-labelledby="tab-4"> <p class="lead">Last Section <p>Oh. You need a little dummy text for your mockup? How quaint. <p>I bet you're still using Bootstrap too… </div> </div> </div> 

Note: The CSS I added in is purely cosmetic, you don't need it for the example to work.