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 <script> 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?<html>    <head>        <script src=http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js></script>        <script>            $(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();                });            });        </script>    </head>    <body>        <div class=btn1>Show1</div>        <div class=btn2>Show2</div>        <div class=btn3>Show3</div>          <p class=default>This is default content.</p>        <p class=one>This is content 1.</p>        <p class=two>This is content 2.</p>        <p class=three>This is content 3.</p>    </body></html>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.)
Simple JavaScript hide/show
javascript;jquery
Someone at phpbuilder.com also responded to my original question (posted there) and came up with a somewhat different method.  I worked with it a bit this morning (and messed with it a bit for my own edification).    <style type=text/css>        /* SYNTAX NOTE: there must be a space between #displays and .hidden */        #displays .hidden { /* if any of the items in the id group displays group has  the class hidden, it will not be displayed*/            display: none;        }        #buttons{width: 50%; float: left;}        #displays{width: 50%; float: left;}    </style><script src=http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js></script><script>        $(document).ready(function () {            window.$ViewItem = $('#displays .default'); //displays the div <p class=default>This is default content.</p>            $('#buttons').on('click', 'div', function (e) {                var $el = $('#displays .' + e.target.className);                // .children looks for direct descendants only                /* $el.removeClass('hidden');  ERROR: THIS LINE SHOULD BE MOVED ONE LOWER*/                window.$ViewItem.addClass('hidden');  /* whatever WAS being shown gets the hidden put back on so that it will disapear*/                $el.removeClass('hidden');   /*click button & hidden class is taken off of any display items, so that they will be displayed*/                window.$ViewItem = $el;            }); /*closes the #buttons function*/        }); /*closes $(document).ready*/</script> <div id=displays>    <p class=default>This is default content. in a p</p>    <div class=default>This is default content. in a div</div>    <p class=one hidden>This is content 1.</p>    <p class=one hidden>This is more of content 1.</p>    <p class=two hidden>This is content 2.</p>    <p class=two hidden>This is more of content 2.</p>        <p class=three hidden>This is content 3.</p>    <div class=three hidden>This is content 3. in a div<div>content in a nested div within 3<br /><img src=archive/imapic.png /></div></div></div><div id=buttons>    <div class=one>Show 1</div>    <div class=two>Show 2</div>    <div class=three>Show 3</div></div>This does work and accomplishes everything (and then some) noted in the original question.  But I would have never come up with any of it myself.  Perhaps it will be of use to someone else.