www.webdeveloper.com
Results 1 to 13 of 13

Thread: [RESOLVED] Show one div while hiding itself

Threaded View

  1. #1
    Join Date
    May 2012
    Location
    Hays, KS
    Posts
    24

    resolved [RESOLVED] Show one div while hiding itself

    hi everyone. right now i'm working on my personal portfolio website and am trying to set it up so that i can click on one image, a div shows, and the div that the image clicked was in is hidden. that way, only one div will be up at all times. the new div will then in turn be able to show the original div.

    my javascript isnt the best it could be, but what i want it to do is that when a category from div#home is clicked, div#home is hidden, while the clicked category is shown. then there will be an option to show div#home again while hiding the category again.


    javascript
    Code:
    function showHide(d){
     var div = document.getElementById(d);
     if (showHide.div&&div!=showHide.div){
      showHide.div.style.display='none';
     }
     div.style.display = div.style.display != 'block'?'block':'none';
     showHide.div=div;
    }

    html
    HTML Code:
    <div id="holder"><div id="home">
    <a href="javascript:show(category_one)"><img src=""><img></a>
    <a href="javascript:show(category_two)"><img src=""><img></a>
    <a href="javascript:show(category_three)"><img src=""><img></a>
    <a href="javascript:show(category_four)"><img src=""><img></a>
    <a href="javascript:show(category_five)"><img src=""><img></a>
    </div>
    <div id="category_one">
    <a href="javascript:show(home);"><img src=""><img></a>
    <a href="item1"><img src=""><img></a>
    <a href="item2"><img src=""><img></a>
    <a href="item3"><img src=""><img></a>
    <a href="item4"><img src=""><img></a>
    <a href="item5"><img src=""><img></a>
    </div>
    <div id="category_two">
    <a href="javascript:show(home);"><img src=""><img></a>
    <a href="item1"><img src=""><img></a>
    <a href="item2"><img src=""><img></a>
    <a href="item3"><img src=""><img></a>
    <a href="item4"><img src=""><img></a>
    <a href="item5"><img src=""><img></a>
    </div>
    <div id="category_three">
    <a href="javascript:show(home);"><img src=""><img></a>
    <a href="item1"><img src=""><img></a>
    <a href="item2"><img src=""><img></a>
    <a href="item3"><img src=""><img></a>
    <a href="item4"><img src=""><img></a>
    <a href="item5"><img src=""><img></a>
    </div>
    <div id="category_four">
    <a href="javascript:show(home);"><img src=""><img></a>
    <a href="item1"><img src=""><img></a>
    <a href="item2"><img src=""><img></a>
    <a href="item3"><img src=""><img></a>
    <a href="item4"><img src=""><img></a>
    <a href="item5"><img src=""><img></a>
    </div>
    <div id="category_five">
    <a href="javascript:show(home);"><img src=""><img></a>
    <a href="item1"><img src=""><img></a>
    <a href="item2"><img src=""><img></a>
    <a href="item3"><img src=""><img></a>
    <a href="item4"><img src=""><img></a>
    <a href="item5"><img src=""><img></a>
    </div></div>
    can i add a "javascript:hide(category_id)" to the end of them or will i have to edit the code? im pretty new to javascript, so any help would be greatly appreciated.
    Last edited by Tibneo; 02-13-2013 at 12:59 PM.

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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



Recent Articles