Tell me how to add code to click the button again to hide the block. Here is my jquery code

$('.btn-map').click(function(event) { event.preventDefault(); $('.list__routes').css('display', 'block'); }); 
 .btn-map { border: 3px solid rgb(62, 172, 255); color: rgb(0, 153, 255); font-family: $Lato; font-size: 18px; font-weight: 400; line-height: 24px; } .list__routes > .list__item { display: block; margin-bottom: 15px; } .list__routes { background-color: white; padding: 10px 25px 10px; display: none; } .list__link { color: rgb(40, 40, 40); font-family: $LatoLight; font-size: 19px; font-weight: 300; text-transform: uppercase; text-decoration: none; &: hover, &: focus { color: rgb(40, 40, 40); text-decoration: none; } } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="btn-map" href="#">Маршруты</a> <ul class="list__routes"> <li class="list__item"> <a href="#" class="list__link">Каменск-Баяндай</a> </li> <li class="list__item"> <a href="#" class="list__link">Оса-Заршина</a> </li> <li class="list__item"> <a href="#" class="list__link">Туристический маршрут</a> </li> <li class="list__item"> <a href="#" class="list__link">Красоты Байкала</a> </li> <li class="list__item"> <a href="#" class="list__link">Рыбалка в Листвянке</a> </li> <li class="list__item"> <a href="#" class="list__link">Веломаршрут</a> </li> </ul>

Now when you click on the button, the block appears, how to add an event so that when you click again - the block is hiding? Thank.

  • 2
    .toggle to help api.jquery.com/toggle - C.Raf.T
  • @ C.Raf.T, if he added the css class then yes, simply and elegantly. And so you need to check the value of the display property - pepel_xD

2 answers 2

 $('.btn-map').click(function(event) { event.preventDefault(); $('.list__routes').toggleClass('on'); }); 
 .btn-map { border: 3px solid rgb(62, 172, 255); color: rgb(0, 153, 255); font-family: $Lato; font-size: 18px; font-weight: 400; line-height: 24px; } .list__routes > .list__item { display: block; margin-bottom: 15px; } .list__routes { background-color: white; padding: 10px 25px 10px; display: none; } .list__link { color: rgb(40, 40, 40); font-family: $LatoLight; font-size: 19px; font-weight: 300; text-transform: uppercase; text-decoration: none; &: hover, &: focus { color: rgb(40, 40, 40); text-decoration: none; } } .list__routes.on { display:block; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="btn-map" href="#">Маршруты</a> <ul class="list__routes"> <li class="list__item"> <a href="#" class="list__link">Каменск-Баяндай</a> </li> <li class="list__item"> <a href="#" class="list__link">Оса-Заршина</a> </li> <li class="list__item"> <a href="#" class="list__link">Туристический маршрут</a> </li> <li class="list__item"> <a href="#" class="list__link">Красоты Байкала</a> </li> <li class="list__item"> <a href="#" class="list__link">Рыбалка в Листвянке</a> </li> <li class="list__item"> <a href="#" class="list__link">Веломаршрут</a> </li> </ul>

    Option with animation

     $('.btn-map').click(function(event) { event.preventDefault(); $('.list__routes').slideToggle(); });

    Option as it is:

     $('.btn-map').click(function(event) { event.preventDefault(); $('.list__routes').is(':visible') ? $('.list__routes').hide() : $('.list__routes').show(); });