[英]Toggle between multiple divs and move text into single block
I have this fiddle that I'm working on, and I can't figure out how to show (toggle) the content inside the black block I made + in the same time toggle "+" and "-" signs for the CLICKED div..我正在处理这个小提琴,但我不知道如何显示(切换)我制作的黑色块内的内容 + 同时切换 CLICKED div 的“+”和“-”符号..
Structure example:结构示例:
$('.column_column > div > div').hide(); $('.column_column h4').click(function(e){ e.preventDefault(); // hide all span var $this = $(this).parent().find('div'); $(".column_column > div > div").not($this).hide(); // here is what I want to do $this.toggle(); });
.sp_appear { background: black; color: #FFF; display: block; float: left; width: 100%; min-height: 150px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="column_column"> <div class="column_attr"> <h4 href="">element1 <span class="sp_toggle_icon">+</span> </h4> <div>content 1</div> </div> </div> <div class="column_column"> <div class="column_attr"> <h4 href="">element2 <span class="sp_toggle_icon">+</span> </h4> <div>content 2</div> </div> </div> <div class="column_column"> <div class="column_attr"> <h4 href="">element3 <span class="sp_toggle_icon">+</span> </h4> <div>content 3</div> </div> </div> <div class="column_column"> <div class="column_attr"> <h4 href="">element4 <span class="sp_toggle_icon">+</span> </h4> <div>content 4</div> </div> </div> <div class="sp_appear"></div>
Can someone please help?有人可以帮忙吗? Attaching the code - https://jsfiddle.net/kp9d0vfb/附上代码 - https://jsfiddle.net/kp9d0vfb/
Is this what you want?这是你想要的吗?
$('.column_column > div > div').hide(); $('.column_column h4').click(function(e){ e.preventDefault(); // hide all span var $this = $(this).parent().find('div'); $(".column_column > div > div").not($this).hide(); // here is what I want to do $this.toggle(); $(this).find("span").text(($(this).find("span").text() == "-")? "+": "-"); });
.sp_appear { background: black; color: #FFF; display: block; float: left; width: 100%; min-height: 150px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="column_column"> <div class="column_attr"> <h4 href="">element1 <span class="sp_toggle_icon">+</span> </h4> <div>content 1</div> </div> </div> <div class="column_column"> <div class="column_attr"> <h4 href="">element2 <span class="sp_toggle_icon">+</span> </h4> <div>content 2</div> </div> </div> <div class="column_column"> <div class="column_attr"> <h4 href="">element3 <span class="sp_toggle_icon">+</span> </h4> <div>content 3</div> </div> </div> <div class="column_column"> <div class="column_attr"> <h4 href="">element4 <span class="sp_toggle_icon">+</span> </h4> <div>content 4</div> </div> </div> <div class="sp_appear"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.