toggling a list using jquery

Question

I am trying to create a toggle list using html and jquery means on clicking button i want a drop-down list my html code snippet is

<div class="container">
  <div class="card text-center" style="width: 14 rem;">
    <div class="card-body">
      <button class="btn btn-danger btn-sm">
          hello
        </button>
      <div class="show">
        <ul class="list">
          <li class="e">Home</li>
          <li class="e">About</li>
          <li class="e">Contact Us</li>
          <li class="e">Log Out</li>
        </ul>
      </div>
    </div>
  </div>
</div>    

and my css styling for the same is

.list{
  display: none;
}
.e{
    list-style: none;
}
.info{
    display: block;
}      

i am having little confusion in the jquery part which looks like this

$(document).ready(function(){
    $('.card-body').on('click','button',function(){
        $('.list li').toggleClass('list');
    });
});

any help would be appreciated.

Answer 1

If you want to toogle your .list you can do it like this:

$(document).ready(function() {
  $('.card-body').on('click', 'button', function() {
    $('.list').toggleClass('info');
  });
});

Note you can also do it like $('.list').toggle()

$(document).ready(function() {
  $('.card-body').on('click', 'button', function() {
    $('.list').toggleClass('info');
  });
});

.list {
  display: none;
}

.e {
  list-style: none;
}

.info {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card text-center" style="width: 14 rem;">
  <div class="card-body">
    <button class="btn btn-danger btn-sm">
          hello
        </button>
    <div class="show">
      <ul class="list">
        <li class="e">Home</li>
        <li class="e">About</li>
        <li class="e">Contact Us</li>
        <li class="e">Log Out</li>
      </ul>
    </div>
  </div>
</div>