Toggle select show – javascript

Reamark : Toggle select show


<!DOCTYPE html>
<html lang="ko">
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.body {
  display:none;
}
.button .positive,
.button .negative {
  width:36px;
  height:36px;
  float:right;
  display:block;
  cursor:pointer;
}
.button .positive {
  background:url('http://t1.gstatic.com/images?q=tbn:ANd9GcSG0K-7ZtTc6XaVGJ8ETAz_wnUtKB6YiAvpPUHd5ED9K4cant8rK9Jq') no-repeat center center / 18px;
}
.button .negative {
  background:url('http://t1.gstatic.com/images?q=tbn:ANd9GcT8kZRbQ5ip-m-yl5Shdlr_jBf0oMm4TFgLW2jDmMYFkDjOllCfS898') no-repeat center center / 18px;
}
</style>
<script>
$(document).ready(function () { 
	jQuery('.button').on('click' ,function(e) {
		 e.preventDefault();
		 var box = jQuery(this).closest('.box');
		var closestBody = box.find('.body');
		jQuery('.body').not(closestBody).hide(); // Hide all except above div

		jQuery(closestBody).toggle(); // if visible hide it else show it

		jQuery('.iconbtn').removeClass('negative').addClass('positive');     
		var iconBtn = box.find('.iconbtn');
		if (jQuery(closestBody).is(':visible')) {
			   iconBtn.removeClass('positive').addClass('negative');
		} else {
			   iconBtn.removeClass('negative').addClass('positive');
		}
	});	
 });
</script>
</head>

<body>
 <div class="box">
  <div class="header">
    <a href="#" class="button">
      <span class="iconbtn positive"></span>
    </a>
  </div>
  <div class="body">
  Text 1
  </div>
</div>
<div style="clear:both;"></div>

<div class="box">
  <div class="header">
    <a href="#" class="button">
      <span class="iconbtn positive"></span>
    </a>
  </div>
  <div class="body">
  Text 2
  </div>
</div>

<div style="clear:both;"></div>

<div class="box">
  <div class="header">
    <a href="#" class="button">
      <span class="iconbtn positive"></span>
    </a>
  </div>
  <div class="body">
  Text 3
  </div>
</div>
</body>
</html>

<!DOCTYPE html>

<head>

<style>

.body {

display:none;

}

.button .positive,

.button .negative {

width:36px;

height:36px;

float:right;

display:block;

cursor:pointer;

}

.button .positive {

background:url('http://t1.gstatic.com/images?q=tbn:ANd9GcSG0K-7ZtTc6XaVGJ8ETAz_wnUtKB6YiAvpPUHd5ED9K4cant8rK9Jq') no-repeat center center / 18px;

}

.button .negative {

background:url('http://t1.gstatic.com/images?q=tbn:ANd9GcT8kZRbQ5ip-m-yl5Shdlr_jBf0oMm4TFgLW2jDmMYFkDjOllCfS898') no-repeat center center / 18px;

}

</style>

$(document).ready(function () {

jQuery('.button').on('click' ,function(e) {

e.preventDefault();

var box = jQuery(this).closest('.box');

var closestBody = box.find('.body');

jQuery('.body').not(closestBody).hide(); // Hide all except above div

jQuery(closestBody).toggle(); // if visible hide it else show it

jQuery('.iconbtn').removeClass('negative').addClass('positive');

var iconBtn = box.find('.iconbtn');

if (jQuery(closestBody).is(':visible')) {

iconBtn.removeClass('positive').addClass('negative');

} else {

iconBtn.removeClass('negative').addClass('positive');

}

});

</script>

</head>

<body>

</a>

</div>

Text 1

</div>

</a>

</div>

Text 2

</div>

</a>

</div>

Text 3

</div>

</body>

</html>

참조 : https://jsfiddle.net/nL4sxbj0/5/