Jquery toggle is effecting all of my share icons

Question

I am setting up a blog here: http://www.bluehavenhomes.com/blog

my Jquery:

 <script>
        $(document).ready(function(){
            $('.Share-button').click(function(){
                $('.share-icon').toggle();    

            });
        });

    </script>

This should be pretty simple but my brain is fried. I need for only the share Icon I click on to show the share buttons. right now if you click 1 share icon all buttons for all posts show. I can't id the posts because they auto populate from the blog database.

Answer 1

Try:

<script>
    $(document).ready(function(){
        $('.Share-button').click(function(){
            $(this).closest('.share-icon').toggle();
            //possibly replace .closest() with .siblings() or .next()

        });
    });

</script>

By using the this selector, you're narrowing to only the element being clicked. From there, you'll need to use either .next(), .siblings(), or.closest() to traverse the DOM and find the element you're looking for.

Answer 2

You need to be more specific in your selectors. This targets only the next sibling of the clicked element:

$('.Share-button').click(function(){
    $(this).next('.share-icon').toggle();    
});

You could also use a common ancestor element to contain target scope:

$('.Share-button').click(function(){
    $(this).closest('.share').find('.share-icon').toggle();    
});