Simple JavaScript hide/show I am working towards a script that will show a set small thumbnail images on one side of the page, that when clicked will show a larger version of the same image, plus related text content on the other side of the page. I am not very good with JavaScript yet and wonder if the &lt;script&gt; section here is fussier than necessary to accomplish this. It does seem to work. But can the script/code be simpler to accomplish this? Should I use "id" or "class" for each item?

&lt;html&gt;
    &lt;head&gt;
        &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
        &lt;script&gt;
            $(document).ready(function() {
                $("p").hide();
                $("p.default").show();
                /*$("p.one").show();*/ /*this would probably be default*/
                $(".btn1").click(function() {
                    $("p").hide();
                    $(".one").show();
                });
                $(".btn2").click(function() {
                    $("p").hide();
                    $(".two").show();
                });
                $(".btn3").click(function() {
                    $("p").hide();
                    $(".three").show();
                });
            });
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div class="btn1"&gt;Show1&lt;/div&gt;
        &lt;div class="btn2"&gt;Show2&lt;/div&gt;
        &lt;div class="btn3"&gt;Show3&lt;/div&gt;  

        &lt;p class="default"&gt;This is default content.&lt;/p&gt;
        &lt;p class="one"&gt;This is content 1.&lt;/p&gt;
        &lt;p class="two"&gt;This is content 2.&lt;/p&gt;
        &lt;p class="three"&gt;This is content 3.&lt;/p&gt;

    &lt;/body&gt;
&lt;/html&gt;


Also, my overall goal is to use this with a page that shows, say 20-30 clickable thumbnails/small images, that when clicked will reveal a couple of text paragraphs and multiple (maybe 25) larger images that relate to the clicked thumbnail.  I believe I understand that all of that will be loaded/hidden when the page first loads.  Does that sound like too much?  Is it likely to be a slow page?

(I posted this exact same thing at phpbuilders...but it looks like a lot more JavaScript stuff goes on here.)
Yes, it's too complex. Make the elements relate to each other, so that you can use a single event handler. This is the typical pattern used to link two DOM elements together, so that one can hide/show/otherwise interact with the other.

&lt;a href="#one"&gt;Show1&lt;/a&gt;
&lt;a href="#two"&gt;Show2&lt;/a&gt;
&lt;a href="#three"&gt;Show3&lt;/a&gt;

&lt;p class="default"&gt;This is default content.&lt;/p&gt;
&lt;p id="one"&gt;This is content 1.&lt;/p&gt;
&lt;p id="two"&gt;This is content 2.&lt;/p&gt;
&lt;p id="three"&gt;This is content 3.&lt;/p&gt;


And:

$('a').click(function (event) {
  event.preventDefault();
  $('p').hide();
  $($(this).attr('href')).show();
});