Results 1 to 3 of 3

Thread: Clicking on image to hide show divs

  1. #1
    Join Date
    Jul 2011

    Question Clicking on image to hide show divs

    I have 7 images (categories) each of which represent a div. all these divs are located at the same location on a web page. what I want to happen is when one of the images is clicked, the div for that image becomes visible and active while the others become hidden and inactive. I don't know the best way to do this using javascript. I'm guessing that each image will trigger the javascript function when clicked such as:

    HTML Code:
    <a href="#" onclick="ChangeCatagory(1);return false;"><p>Additions</p><img src="imagini/preview/additionDefault.png" /></a>
    <a href="#" onclick="ChangeCatagory(2);return false;"><p>Basements</p><img src="imagini/preview/basementDefault.png" /></a>
    <a href="#" onclick="ChangeCatagory(3);return false;"><p>Baths</p><img src="imagini/preview/bathDefault.png" /></a>
    <a href="#" onclick="ChangeCatagory(4);return false;"><p>Decks &amp; Porches</p><img src="imagini/preview/deckDefault.png" /></a>
    <a href="#" onclick="ChangeCatagory(5);return false;"><p>Interiors</p><img src="imagini/preview/interiorDefault.png" /></a>
    <a href="#" onclick="ChangeCatagory(6);return false;"><p>Kitchens</p><img src="imagini/preview/kitchenDefault.png" /></a>
    <a href="#" onclick="ChangeCatagory(7);return false;"><p>Specialty</p><img src="imagini/preview/poolDefault.png" /></a>
    I'm also guessing each div tag would have an id and style such as:
    HTML Code:
    <div id="category1" style="display:block">additional html</div>
    <div id="category2" style="display:hidden">additional html</div>
    <div id="category3" style="display:hidden">additional html</div>
    <div id="category4" style="display:hidden">additional html</div>
    <div id="category5" style="display:hidden">additional html</div>
    <div id="category6" style="display:hidden">additional html</div>
    <div id="category7" style="display:hidden">additional html</div>
    and the javascript function will contain some sort of loop to "turn on or off" the divs accordingly.

    I was hoping someone would let me know if I'm on the right track and show me what that function would look like.

  2. #2
    Join Date
    Apr 2012
    There is a simple function available on http://www.quirksmode.org/dom/getstyles.html
    This gives you the function getStyle. Using this will enable you to do an if/else to check if you should hide or view the category.
    Your basic setup seems okay. So you should make the function ChangeCategory, check the current status of the div by the getStyle function and then take the needed action.

  3. #3
    Join Date
    Jun 2004
    Portsmouth UK
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <script type="text/javascript">
    function ChangeCatagory(n){
     for (var z0=1;document.getElementById('category'+z0);z0++){
     return false;
    <a href="#" onclick="return ChangeCatagory(1);"><p>Additions</p><img src="imagini/preview/additionDefault.png" /></a>
    <a href="#" onclick="return ChangeCatagory(2);"><p>Basements</p><img src="imagini/preview/basementDefault.png" /></a>
    <a href="#" onclick="return ChangeCatagory(3);"><p>Baths</p><img src="imagini/preview/bathDefault.png" /></a>
    <a href="#" onclick="return ChangeCatagory(4);"><p>Decks &amp; Porches</p><img src="imagini/preview/deckDefault.png" /></a>
    <a href="#" onclick="return ChangeCatagory(5);"><p>Interiors</p><img src="imagini/preview/interiorDefault.png" /></a>
    <a href="#" onclick="return ChangeCatagory(6);"><p>Kitchens</p><img src="imagini/preview/kitchenDefault.png" /></a>
    <a href="#" onclick="return ChangeCatagory(7);"><p>Specialty</p><img src="imagini/preview/poolDefault.png" /></a>
    <div id="category1" style="display:block">additional html 1</div>
    <div id="category2" style="display:none">additional html 2</div>
    <div id="category3" style="display:none">additional html 3</div>
    <div id="category4" style="display:none">additional html 4</div>
    <div id="category5" style="display:none">additional html 5</div>
    <div id="category6" style="display:none">additional html 6</div>
    <div id="category7" style="display:none">additional html 7</div></body>

    God loves you and will never love you less.

    If my post has been useful please donate to http://www.operationsmile.org.uk/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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