Toggle between multiple divs and move text into single block

Question

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..

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/

Answer 1

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>