SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Location
    England
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

    http://i50.tinypic.com/v78941.jpg

    Thanks

  2. #2
    Non-Member
    Join Date
    Jun 2012
    Posts
    88
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  4. #4
    Non-Member
    Join Date
    Jun 2012
    Posts
    88
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    or since we don't need you to provide code first, then I would adapt something like this:

    Code:
    <!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>

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Location
    England
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help so far guys. I'll look over this properly when I get home with what code I have. Cheers chaps.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •