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.)