I have this example:
HTML CODE:
<div class="common-class">
<div class="trigger">
<span class="plus">+</span>
<span class="minus">-</span>
</div>
<div class="show"></div>
</div>
<div class="common-class">
<div class="trigger">
<span class="plus">+</span>
<span class="minus">-</span>
</div>
<div class="show"></div>
</div>
<div class="common-class">
<div class="trigger">
<span class="plus">+</span>
<span class="minus">-</span>
</div>
<div class="show"></div>
</div>
CSS CODE:
.trigger{
background:red;
width:100px;
height:50px;
}
.show{
width:100px;
height:100px;
background:blue;
display:none;
}
.common-class{
display:inline-block;
margin-left:10px;
}
.minus{
display:none;
color:white;
}
.plus{
color:white;
}
JAVASCRIPT CODE:
$( ".plus" ).on( "click", function() {
$(this).closest('.common-class').find('show').show();
});
My aim is to only display the current element with the class "show".
I've tried something like 'but it shows all elements.
$(".show").toggle();
How can I solve this issue?
I hope I explained myself clearly... let me know if you need further explanations.
Thank you in advance!
EDIT:
I'm back with a question, I managed to make it work but how can I keep only one open at a time?
JAVASCRIPT CODE:
$( ".plus" ).on( "click", function() {
$(this).hide();
$(this).closest('.common-class').find('.show').show();
$(this).next().show();
});
I want only the current element to stay open, not allow more than one to be open...
EDIT 2:
I'm almost done... there's just one problem. There are other minus signs remaining before... only one minus sign should exist when open
JAVASCRIPT CODE:
$( ".plus" ).on( "click", function() {
$(this).hide();
$('.show').hide();
//$('.show').hide();
$(this).closest('.common-class').find('.show').show();
$(this).next().show();
});
$( ".minus" ).on( "click", function() {
});