Hide unordered list inside div with specific class

Question

I have this basic HTML:

<div class="row">
    <div class="col-md-12">
        <div class="scrollbox list">            
            <ul class="list-unstyled">
                <li id="articulate.flute">articulate flute</li>
                <li id="nepalese.ledger">nepalese ledger</li>
                <li id="rural.grass">rural grass</li>
                <li id="alone.fox">alone fox</li>
                <li id="rummage.senator">rummage senator</li>
            </ul>
        </div>
    </div>
</div>

I'd like to add a button on the page which hides the ul that sits inside the <div class="scrollbox list"> div.

Is that possible?

Answer 1

you can using jquery like this:

$(".scrollbox").find('ul').hide();

and if you wand bind above code to you button using this:

<script>
   $(document).ready(function(){
      $("#buttonName").click(function(){
           $(".scrollbox").find('ul').hide();
    });
   });
</script>

Answer 2

Please try this.

 $(".hide-btn").click(function(){ $(".list-unstyled").hide(); }) 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-12"> <button class="btn btn-default hide-btn">hide</button> <div class="scrollbox list"> <ul class="list-unstyled"> <li id="articulate.flute">articulate flute</li> <li id="nepalese.ledger">nepalese ledger</li> <li id="rural.grass">rural grass</li> <li id="alone.fox">alone fox</li> <li id="rummage.senator">rummage senator</li> </ul> </div> </div> </div> </div> 

Answer 3

You can used slideToggle()

 $(document).ready(function(){ $('.toggleList').click(function(){ $('.list-unstyled').slideToggle(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="col-md-12"> <div class="scrollbox list"> <button class="toggleList"><span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span></button> <ul class="list-unstyled"> <li id="articulate.flute">articulate flute</li> <li id="nepalese.ledger">nepalese ledger</li> <li id="rural.grass">rural grass</li> <li id="alone.fox">alone fox</li> <li id="rummage.senator">rummage senator</li> </ul> </div> </div> </div>