I do a self-made spoiler tabs which have a link.

I need a code that will open it when I click on a block, but I cannot open an open one, and if there are no problems with this, then I cannot think of how to handle a click on an already active element. normally closes 1 time, but the next time you open it, the activity class is no longer hanging.

Here is the code for the slider itself:

<div class="spoiler"> <div class="item"><div class="item-title">№201</div> <div class="detail">Lorem ipsum</div> </div> <div class="item"><div class="item-title">№202</div> <div class="detail">ipsum dolor</div> </div> <div class="item"><div class="item-title">№203</div> <div class="detail">dolor sit</div> </div> </div>

from classes everything is clear, here is js:

 $('.spoiler .detail').hide(); $('.spoiler .item-title').click(function(){ a=0; $('.item.active').removeClass("active"); $(this).parent().addClass("active"); if(typeof $prev != "undefined"){ if($previ != $(this)[0]){ $prev.slideUp(); }else{ a=1; $(this).parent().removeClass("active"); } } if(a==1){ $(this).next().slideToggle(); }else{ $(this).next().slideDown(); } $prev = $(this).next(); $previ = $(this)[0]; });

I tried to close all the blocks first and then work with the pressed one and remember the pressed block to work with it the next time I press it, but I don’t know how to win this problem, everything works except for handling the same block pressing (only with the activity class the problem that changes the style, the block itself unfolds as it should)

  • one
    why remember something if you hang an activity class on a block? Duck you and check, if there is a class at which the item was clicked, just collapse it, if not, collapse all the others, and expand this one. That's the whole logic - Vasily Barbashev
  • even it became a shame, because there were thoughts that something should be done with an asset. need to sleep more. thank you - Maximmka

1 answer 1

Well, something like this:

 (function($) { $(document).ready(function() { var $spoiler = $('.spoiler'); var $items = $spoiler.find('.item'); $spoiler.on('click', '.item-title', function() { var $item = $(this).parent(); var is_active = $item.hasClass('active'); $items.removeClass('active'); if (is_active) { return; } $item.addClass('active'); }); }); })(jQuery); 
 .spoiler .item .detail { display: none; } .spoiler .item.active .detail { display: block; } /** Немножко стилей для понятности **/ .spoiler .item .item-title { padding: 10px; background: #eee; cursor: pointer; border-bottom: 1px solid #ccc; } .spoiler .item .item-title:hover { background: #555; color: #fff; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="spoiler"> <div class="item active"> <div class="item-title">Item №1</div> <div class="detail">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset.</div> </div> <div class="item"> <div class="item-title">Item №2</div> <div class="detail">To make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> </div> <div class="item"> <div class="item-title">Item №3</div> <div class="detail">Sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> </div> </div>

For reference:

It may seem to you that declaring variables with and without var always leads to the same result, but this is true only when the declaration occurs in a global context (that is, beyond all functions).

If the declaration occurs in a local context (that is, in the body of a function), a declaration with var creates a local variable (that is, a variable that will be available only in the body of this function and will be deleted after the function is executed), the declaration without var creates a global variable (i.e., a variable that will be available to other functions within this script).

To avoid errors in the code, we recommend that you always try to define variables with var.