0
144
ViewsHow to stop all social icons activating simultaneously when one of them is clicked?
Whenever one social share icon is clicked then all other social icons also get triggered.
This is my HTML.
<div class="share">
<div class="toggle"></div>
<ul>
<li><a id="facebook-icon-hover" href="#"> <i class="facebook-icon-hover fab fa-facebook"></i></a></li>
<li><a id="instagram-icon-hover" href="#"> <i class="instagram-icon-hover fab fa-instagram"></i></a></li>
<li><a id="youtube-icon-hover" href="#"> <i class="youtube-icon-hover fab fa-youtube"></i></a></li>
<li><a id="whatsapp-icon-hover" href="#"> <i class="whatsapp-icon-hover fab fa-whatsapp"></i></a></li>
<li><a id="pinterest-icon-hover" href="#"> <i class="pinterest-icon-hover fab fa-pinterest"></i></a></li>
<li><a id="snapchat-icon-hover " href="#"> <i class="snapchat-icon-hover fab fa-snapchat"></i></a></li>
<li><a id="tumblr-icon-hover" href="#"> <i class="tumblr-icon-hover fab fa-tumblr"></i></a></li>
<li><a id="twitter-icon-hover" href="#"> <i class="twitter-icon-hover fab fa-twitter"></i></a></li>
</ul>
</div>
This is my JS.
<script type="text/javascript">
$(document).ready(function() {
$('.toggle').click(function(){
$('.toggle').toggleClass('active')
$('ul').toggleClass('active')
})
})
</script>
·
Juan Pablo Isaza
1 answers
Answer question0
You are toggling active class on all elements that have toggle class and all <ul> on every toggle click. You should toggle active classes only on clicked element and closest <ul>. Use event input argument inside provided callback function and toggle class only on that element (and its siblijng - <ul>):
$(document).ready(function() {
$('.toggle').click( function(event) { // event as input
const el = $(event.currentTarget); // extract clicked element from input Event
el.toggleClass('active');
el.next().toggleClass('active'); // find first sibling, which is <ul> in your case and toggle class 'active' on it
})
})
·
Juan Pablo Isaza
Report
Answer question