Results 1 to 6 of 6

Thread: show hide div (hide last open div)

  1. #1
    Join Date
    Sep 2007
    Posts
    21
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default show hide div (hide last open div)

    Hello I'm trying to do a show hide div function that will hide the last open div and will open the new one
    Code:
    <script type="text/Javascript"> 
    function HideContent(d) {document.getElementById(d).style.display = "none";}
    function ShowContent(d) {document.getElementById(d).style.display = "";}
    function ReverseContentDisplay(d) 
    {if(document.getElementById(d).style.display == "none") {
    document.getElementById(d).style.display = ""; 
    }else { document.getElementById(d).style.display = "none"; }}
    </script>
    I got this function that works for hiding and showing div but it doesnt hide the last div when a new one is open instead opens a new one
    someone suggested me to use this
    Code:
    if (previousD != null) { HideContent(previousD); }
    previousD = d;
    but I'm not really sure how to use it , can someone help me please.
    I'm using javascript:ReverseContentDisplay('number') to show/hide the div i'm not sure if/how i should use HideContent/ShowContent functions too.
    help please.

  2. #2
    Join Date
    Dec 2007
    Location
    Ankara, Turkey
    Posts
    160
    Thanks
    2
    Thanked 2 Times in 2 Posts

    Default

    Code:
    <script type="text/Javascript"> 
    var previousD;
    function HideContent(d) {document.getElementById(d).style.display = "none";}
    function ShowContent(d) {document.getElementById(d).style.display = "";}
    function ReverseContentDisplay(d) 
    {if(document.getElementById(d).style.display == "none") {
    ShowContent(d);if (!previousD) HideContent(previousD);previousD = d;
    }else HideContent(d)}
    </script>
    Above code should make the trick for you. But try to understand waht you are doing if you want to learn something. (But above code is not a good example to study on, since it is not well-formed.)

  3. #3
    Join Date
    Sep 2007
    Posts
    21
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Yes BYK I understand that its not the way to learn.
    the new code still doesnt hide me the last opened div BYK.
    I'm not sure what im doing wrong.

  4. #4
    Join Date
    Jun 2007
    Posts
    543
    Thanks
    3
    Thanked 78 Times in 78 Posts
    Blog Entries
    1

    Default

    try this
    Code:
    <script type="text/Javascript"> 
    var previousD;
    function HideContent(d) {document.getElementById(d).style.display = "none";}
    function ShowContent(d) {document.getElementById(d).style.display = "";}
    function ReverseContentDisplay(d) 
    {if(document.getElementById(d).style.display == "none") {
    if(previousD != null) { HideContent(previousD); } ShowContent(d); previousD = d; 
    }else {HideContent(d);}}
    </script>
    Last edited by Master_script_maker; 12-24-2007 at 09:02 PM.
    [Jasme Library (Javascript Motion Effects)] My Site
    /\/\@ /\/\@|{
    There are 10 kinds of people in the world, those that understand binary and those that don't.

  5. #5
    Join Date
    Dec 2007
    Location
    Ankara, Turkey
    Posts
    160
    Thanks
    2
    Thanked 2 Times in 2 Posts

    Default

    The above code definitely will hide the div itself immediately after its visible.
    Ok just switch the
    Code:
    (!previousD)
    to
    Code:
    (previousD != null)
    Last edited by BYK; 12-24-2007 at 08:56 PM.

  6. #6
    Join Date
    Sep 2007
    Posts
    21
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Code:
     <p><a href="javascript:ReverseContentDisplay('05')"><img src="disc1.jpg" width="100" BORDER="0" height="103" title=" "></a><a href="javascript:ReverseContentDisplay('04')"><img src="disk2.jpg" width="100" BORDER="0" height="84" title="the sound of silent"></a><a href="javascript:ReverseContentDisplay('03')"><img src="disk3.jpg" width="100"  BORDER="0" height="102" title=""></a><a href="javascript:ReverseContentDisplay('02')"><img src="disk4.jpg" width="100" BORDER="0"  height="96" title=" "></a><a href="javascript:ReverseContentDisplay('01')"><img src="disc5.jpg" width="100"  BORDER="0" height="102" title=""></a></p>
    this is the code i use to show and hide it and show it

    and something like this
    <div id="02" class="city-list" style="display: none;">
    content here
    </div>
    maybe it should come with a css code too that i missing
    I under the logicstic behind this but i cant seem to figure out how to make this work been trying to make this work for weeks

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
  •