Показать скрыть div по очереди

109

06 января 2021, 22:40

не могу разобраться как по очереди закрывать и открывать блок, ниже код который только закрывает все блоки и меняет клас у span, что-бы поменять background (в моем случае на сайте нужно менять background-image, но я решил не заморачиваться и поставил просто background: цвет), а мне же нужно по очереди кликнув на 1 span.minus закрыть возле него блок .remove_block, на 2 span.minus закрыть возле него блок .remove_block, и когда закроеться .remove_block тогда открыть блок .remove_block и поменять у span.minus на span.plus и таким же образом открывать .remove_block Это только урывок с кода сайта, для вашей облегчения помощи За ранее спасибо

//То что я писал и у меня не получаеться 
$(document). ready(function(){ 
 
$(".minus").click(function() { 
  $(".minus").removeClass('minus'); 
  $(".minus").addClass('plus'); 
   
  $(".open_bl span").removeClass('minus'); 
  $(".open_bl span").addClass('plus'); 
   
  $(".remove_block").fadeOut(); 
}); 
	 
  $(".plus").click(function() { 
  $(".plus").removeClass('plus'); 
  $(".plus").addClass('minus'); 
   
  $(".open_bl span").removeClass('plus'); 
  $(".open_bl span").addClass('minus'); 
 
  $(".remove_block").fadeIn(); 
}); 
});

.sub-inner-sidebar{ 
  position:relative; 
} 
.sub-inner-sidebar span.minus{ 
	background:#000; 
	width:16px; 
	height: 12px;	 
	border-radius: 5px; 
    display: inline-block; 
} 
.sub-inner-sidebar span.plus{ 
	background:green; 
    background-repeat: no-repeat; 
    width: 12px; 
    height: 12px; 
    border-radius: 5px; 
    display: inline-block; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="sub-inner-sidebar"> 
    	<div class="open_bl minus"> 
    		<span class="minus"></span> 
    	</div> 
    	<div class="remove_block"> 
    		1 
    	</div> 
    </div> 
     
    <div class="sub-inner-sidebar"> 
    	<div class="open_bl minus"> 
    		<span class="minus"></span> 
    	</div> 
    <div class="remove_block"> 
    	2 
    </div> 
    </div> 
     
    <div class="sub-inner-sidebar"> 
    	<div class="open_bl minus"> 
    		<span class="minus"></span> 
    	</div> 
    	<div class="remove_block"> 
      3 
    	</div> 
    </div>

Answer 1

$(document).ready(function(){ 
  $('.open_bl').each(function(){ 
    $(this).click(function(){ 
      $(this).toggleClass('minus plus'); 
      $(this).find('span').toggleClass('minus plus'); 
  
      $(this).next('.remove_block').fadeToggle(); 
    }); 
  }); 
});

.sub-inner-sidebar{ 
  position:relative; 
} 
.sub-inner-sidebar span.minus{ 
	background:#000; 
	width:16px; 
	height: 12px;	 
	border-radius: 5px; 
    display: inline-block; 
} 
.sub-inner-sidebar span.plus{ 
	background:green; 
    background-repeat: no-repeat; 
    width: 12px; 
    height: 12px; 
    border-radius: 5px; 
    display: inline-block; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="sub-inner-sidebar"> 
    	<div class="open_bl minus"> 
    		<span class="minus"></span> 
    	</div> 
    	<div class="remove_block"> 
    		1 
    	</div> 
    </div> 
     
    <div class="sub-inner-sidebar"> 
    	<div class="open_bl minus"> 
    		<span class="minus"></span> 
    	</div> 
    <div class="remove_block"> 
    	2 
    </div> 
    </div> 
     
    <div class="sub-inner-sidebar"> 
    	<div class="open_bl minus"> 
    		<span class="minus"></span> 
    	</div> 
    	<div class="remove_block"> 
      3 
    	</div> 
    </div>