javascript - jquery toggle only one item -

i try add jquery script toggle footer columns, problem how can make stop toggling items. when click on h4 tags h4 tags toggle together.

html:

<div class="row footer-cols">     <div class="col-sm-7 five-three">         <div class="row">             <div class="col-sm-4">                 <h4>information<span class="toggle"></span></h4>                 <div class="footer-cols-content">                     <ul>                         <li><a href="#">about us</a></li>                         <li><a href="#">customer service</a></li>                         <li><a href="#">privacy policy</a></li>                     </ul>                 </div>             </div>             <div class="col-sm-4">                 <h4>why buy us<span class="toggle"></span></h4>                 <div class="footer-cols-content">                     <ul>                         <li><a href="#">shipping & returns</a></li>                         <li><a href="#">secure shopping</a></li>                         <li><a href="#">international shipping</a></li>                     </ul>                 </div>             </div>         </div>     </div> </div> 

jquery script

    jquery('.footer .footer-cols h4').append('<span class="toggle"></span>');     jquery('.footer h4').on("click", function(){         if (jquery(this).find('span').attr('class') == 'toggle opened') { jquery(this).find('span').removeclass('opened').parents('.footer-cols').find('.footer-cols-content').slidetoggle(); }         else {             jquery(this).find('span').addclass('opened').parents('.footer-cols').find('.footer-cols-content').slidetoggle();         }     }); 

you try following code:

jquery('.footer .footer-cols h4').append('<span class="toggle"></span>');     jquery('.footer-cols h4').on("click", function(){         if (jquery(this).find('span').attr('class') == 'toggle opened') { jquery(this).find('span').removeclass('opened').parent().next().slidetoggle();         }         else {             jquery(this).find('span').addclass('opened').parent().next().slidetoggle();         }     }); 

the problem selector with

parents('.footer-cols') 

you select

<div class="row footer-cols"></div> 

element on top.

find('.footer-cols-content') 

selects child elements in resulting of them slidetoggle()