Jquery - Open all tabs

Asked

Viewed 27 times

-2

I’ve created a div that will expand. But when I click expand, all the Ivs open instead of just opening the one I want to expand. Is there any way to open only the div I clicked?

Note: It will be connected to the database and new Ivs will be created over time, so ID is not under consideration.

My code:

Html:

<div class="titulo">Título</div>
   <div class="open"><i class="fas fa-chevron-down></i></div>
   <div class="open"><i class="fas fa-chevron-up></i></div>
<div class="corpo"></div>

Css: 

i.fa-chevron-up{display: none}
.corpo{display: none}

Jquery:

$("i.fa-chevron-down").click(function(){
   $(".corpo").slideDown(500);
   $("i.fa-chevron-down").hide(0);
   $("i.fa-chevron-up").show(0);
});

$(".fa-chevron-up").click(function(){
   $(".corpo").slideUp(500);
   $("i.fa-chevron-down").show(0);
   $("i.fa-chevron-up").hide(0);     
});
javascript jquery html5 css3 front-end

  • Emanoel, with this css nothing is shown on the screen except the title. Check if this is it.

  • Dude, I can’t help you with this code, just do a functional example here: https://jsbin.com/

1 answer

0

I didn’t test it, but I believe it works:

<div class="titulo">Título</div>
   <div class="open"><i class="fas">a</i></div>
   <div class="open"><i class="fas">v</i></div>
<div class="corpo"></div>

<script type="text/javascript">

$(".fas").on("click",function(){
    $(".fas").hide();
    $(this).show()
});
</script>

Use the script after html so that jquery can capture which object is being clicked to capture the value of this

  • If you prefer, to give a more interesting effect, trade Hide() for slideup() and show() for slideDown();

Browser other questions tagged javascript jquery html5 css3 front-end

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