List-group toogle with jQuery

Asked

Viewed 74 times

3

I tried and I couldn’t. I have a list of Bootstrap and I need to make sure that by clicking on the item .active, the rest below open with the .toggle(), but I can’t do it, you’re behaving very strangely.

<html>
<style>
    .list-widget .list-group-item { display: none; }
    .list-widget .list-group-item:active { display: block; }
</style>
<div class="list-group list-widget">
    <a href="#" class="list-group-item active">Lista#01</a>
    <a href="#" class="list-group-item">Item#01</a>
    <a href="#" class="list-group-item">Item#02</a>
    <a href="#" class="list-group-item">Item#03</a>
</div>
<div class="list-group list-widget">
    <a href="#" class="list-group-item active">Lista#02</a>
    <a href="#" class="list-group-item">Item#01</a>
    <a href="#" class="list-group-item">Item#02</a>
    <a href="#" class="list-group-item">Item#03</a>
</div>

<script>
$(document).ready(function(){
    $('.list-widget .list-group-item.active').click(function(){
        // Aqui abrir e fechar com .toggle();
        // Somente as .list-group-item da lista relacionada
    });
});
</script>
</html>
jquery

2 answers

2

I created a div with the "sub-items" class, I leave it hidden using the method hide, until you click on div with the "active" class toggle in the next element that in the case is the div with the class "sub-tens", see the result below:

$(document).ready(function(){
    $('.sub-itens').hide();
    $('.list-widget .list-group-item.active').click(function(){
        $(this).next().toggle("slow");
    });    
});
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-group list-widget">
    <a href="#" class="list-group-item active">Lista#01</a>
    <div class="sub-itens">
      <a href="#" class="list-group-item">Item#01</a>
      <a href="#" class="list-group-item">Item#02</a>
      <a href="#" class="list-group-item">Item#03</a>
    </div>
</div>
<div class="list-group list-widget">
    <a href="#" class="list-group-item active">Lista#02</a>
    <div class="sub-itens">
      <a href="#" class="list-group-item">Item#01</a>
      <a href="#" class="list-group-item">Item#02</a>
      <a href="#" class="list-group-item">Item#03</a>
    </div>
</div>

  • 1

    Thank you Wictor!

2


Your CSS has an error in :active, where it should be .active. And to open the other items with .toggle you can use .siblings() (brother elements).

It’s interesting to still use .preventDefault() to cancel the link click event.

$(document).ready(function(){
    $('.list-widget .list-group-item.active').click(function(e){
       e.preventDefault();
       $(this).siblings().toggle(400);
    });
});
.list-widget .list-group-item { display: none; }
.list-widget .list-group-item.active { display: block; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<div class="list-group list-widget">
    <a href="#" class="list-group-item active">Lista#01</a>
    <a href="#" class="list-group-item">Item#01</a>
    <a href="#" class="list-group-item">Item#02</a>
    <a href="#" class="list-group-item">Item#03</a>
</div>
<div class="list-group list-widget">
    <a href="#" class="list-group-item active">Lista#02</a>
    <a href="#" class="list-group-item">Item#01</a>
    <a href="#" class="list-group-item">Item#02</a>
    <a href="#" class="list-group-item">Item#03</a>
</div>

To have the effect like "accordion", the .toogle() must have a value, be it numerical in milliseconds or "slow" or "fast". In the above case I used 400, an intermediate value between the "slow" (600) and slower than the "fast" (200).

Using . slideToggle()

The effect is much better using .slideToggle(). That’s because the .toggle(), during animation, increase (when showing) and reduce (when hiding) the width of the elements.

See the difference with .slideToggle():

$(document).ready(function(){
    $('.list-widget .list-group-item.active').click(function(e){
       e.preventDefault();
       $(this).siblings().slideToggle(400);
    });
});
.list-widget .list-group-item{ display: none; }
.list-widget .list-group-item.active { display: block; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<div class="list-group list-widget">
    <a href="#" class="list-group-item active">Lista#01</a>
    <a href="#" class="list-group-item">Item#01</a>
    <a href="#" class="list-group-item">Item#02</a>
    <a href="#" class="list-group-item">Item#03</a>
</div>
<div class="list-group list-widget">
    <a href="#" class="list-group-item active">Lista#02</a>
    <a href="#" class="list-group-item">Item#01</a>
    <a href="#" class="list-group-item">Item#02</a>
    <a href="#" class="list-group-item">Item#03</a>
</div>

  • Thanks, the effect pleased enough too !!!! = D

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.