Show and hide elements in JQuery I have the following script to reveal sections on a page if certain text in an  is clicked. How do I collapse all other sections if any one of them is selected and make it scalable for 20 items?

The following solution looks like it needs refactoring, and also when clicking icn_1, for instance, all other sections might already be hidden and putting an if for all sections for each click function seems very redundant.

$(document).ready(function() {
  $('section#1').hide();
  $('section#2').hide();
  $('section#3').hide();
  $('section#4').hide();    

  function reveal1() {
  $("section#1").show("slow");
  $("section#2").hide("fast");
  $("section#3").hide("fast");
  $("section#4").hide("fast");
  }
  $(".icn_1").click(reveal1);

  function reveal2() {
  $("section#2").show("slow");
  $("section#1").hide("fast");
  $("section#3").hide("fast");
  $("section#4").hide("fast");
  }
  $(".icn_2").click(reveal2);

  function reveal3() {
  $("section#3").show("slow");
  $("section#1").hide("fast");
  $("section#2").hide("fast");
  $("section#4").hide("fast");
  }
  $(".icn_3").click(reveal3);

  function reveal4() { 
  $("section#4").show("slow");
  $("section#1").hide("fast");
  $("section#2").hide("fast");
  $("section#3").hide("fast");
  }
  $(".icn_4").click(reveal4);
});
First, you have multiple functions with the same name.  That's not valid.

Assuming these sections are divs, to hide all of them except one, take a look at the not function:

function reveal1() { 
    $("div").not("#section1").hide("slow");
    $("#section1").show();
}


Or more generically:

function revealThisElement(elementId) { 
    $("div").not("#" + elementId).hide("slow");
    $("#" + elementId).show();
}

$(".icn_1").click(function() { revealThisElement("section1"); });
$(".icn_2").click(function() { revealThisElement("section2"); });
$(".icn_3").click(function() { revealThisElement("section3"); });


Or better yet, why not try something like this:

$(".revealable").click(function() { 
   revealMe(this); 
});

function revealMe(element) { 
    $("div.revealable").not("#" + element.id).hide("slow");
    $(element).show();
}