Show / Collaspe content

Hi all,

So I’m creating my portfolio, I have a section on my site that will contain some thumbnails of my work, in a row. Probably about 10, or so. Anyway I want people who visit my website to be able to click on these thumbnails a new content area with some information about that particular thumbnail image.

I have attached a screenshot of what I’m thinking; the red box will be the new content area that drops down when you click on a thumbnail. By default, it is not shown and it will hide the current content area when a new thumbnail is clicked. So the content about a thumbnail is in the same place as the others.

Any help would be great with regards to how I go achieveing this.

Thanks

This sounds like a homework exercise to me, so post the code you have so far.

In any case, it’s only a few lines of javascript to do what you want.

A few of these could possibly be adapted to this use:

http://bxslider.com/examples/thumbnails-pager-method-1
http://exposure.blogocracy.org/demos/demo1.html?v=0.9.1
http://www.twospy.com/galleriffic/example-4.html#5
http://jquerytools.org/#features
http://kevinbatdorf.github.com/codaslider/

or since we don’t need you to provide code first, then I would adapt something like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title></title>
        <style type="text/css">
            #infoCont p {
                display: none;
            }
        </style>
        <script type="text/javascript">
            function hideChildren(elemID){
                var childElems = document.getElementById(elemID).childNodes;
                for(var i=0; i<childElems.length; i++){
                    if(childElems[i].nodeType == 1){childElems[i].style.display = 'none';}
                }
            }
            window.onload=function(){
                var thumbsO = document.getElementById('thumbsCont').getElementsByTagName('img');
                for(var i=0; i<thumbsO.length; i++){
                    thumbsO[i].num = i;
                    thumbsO[i].onclick=function(){
                        hideChildren('infoCont');
                        document.getElementById('info_'+this.num).style.display = 'block';
                    }
                }
            }
        </script>
    </head>
    <body>
        <div id="thumbsCont">
            <img id="thumb1" src="num1.jpg" alt="" />
            <img id="thumb2" src="num2.jpg" alt="" />
            <img id="thumb3" src="num3.jpg" alt="" />
        </div>
        <div id="infoCont">
            <p id="info_0">Info for thumb 1</p>
            <p id="info_1">Info for thumb 2</p>
            <p id="info_2">Info for thumb 3</p>
        </div>
    </body>
</html>

Thanks for the help so far guys. I’ll look over this properly when I get home with what code I have. Cheers chaps.