How can I toggle the element that is clicked and hide all others?

by 
 $('.item span').hide();

$('.item a').click(function(e){

    e.preventDefault();
    // hide all span
    var $this = $(this).parent().find('span');
    $(".item span").not($this).hide();

    // here is what I want to do
    $this.toggle();

});

Check demo

Update with explanation:

The problem is when you hide all spans, you also hide the current span => all spans have the same state (hidden), and your next line display it again. You have to exclude the current element when hiding and use toggle method to toggle its state (simpler than using if to check)

Another problem is try to avoid implicit global by using var to declare $this:

var $this = $(this).parent().find('span');

More Related Contents:

  1. How to dectect objects' overlaping situations in javascirpt? [closed]
  2. Turning live() into on() in jQuery
  3. Cross-browser window resize event – JavaScript / jQuery
  4. jQuery ajax success callback function definition
  5. Check if event exists on element [duplicate]
  6. Remove everything after a certain character
  7. How to search JSON tree with jQuery
  8. Javascript Contenteditable – set Cursor / Caret to index
  9. How to make a simple image upload using Javascript/HTML
  10. Detect if browser tab is active or user has switched away
  11. Differences between contentType and dataType in jQuery ajax function
  12. Get the visible height of a div with jQuery
  13. Count the number of integers in a string
  14. Ajax, prevent multiple request on click
  15. AJAX Promises using Array
  16. jquery: unload or beforeunload?
  17. Open infoWindows from an external link outside of the google map
  18. Sorting of jqGrid (v4.1.2) treegrid not working with Ajacency Model
  19. Get the offset position of the caret in a textarea in pixels [duplicate]
  20. jQuery keyboard events
  21. Chain ajax and execute it in sequence. Jquery Deferred
  22. How do I make an area unclickable with CSS?
  23. ToggleClass animate jQuery?
  24. Javascript – Leading zero to a number converting the number to some different number. not getting why this happening?
  25. Blur event stops click event from working?
  26. Randomize setInterval ( How to rewrite same random after random interval)
  27. Will $(window).resize() fire on orientation change?
  28. difference between parseInt() and parseFloat() [duplicate]
  29. Convert iso timestamp to date format with Javascript?
  30. Disabling links to stop double-clicks in JQuery

Leave a Comment