Help about div hide/show

Discussion in 'Javascript' started by ali, Jan 12, 2007.

  1. ali

    ali Guest

    Hello every one

    i need you help regarding div hide and show. i am having a link like
    <a href="#" onClick="expandWin()">show/hide </a>
    <div id=showHide>

    </div>


    within div i have lots of form tags and div elements say n. The problem
    here is i try to hide showHide by calling function
    function hideWin()
    {

    document.getElementById("showHide").style.visibility="hidden";
    }
    but divs within above div don't get hide.

    one way is to loop through all divs and made their visibility="hidden"
    but it can't work for me as i have to hide a particular portion of web
    page and no of divs within that protion is unknown. and making all divs
    hidden by getElementByID(DivId) is impractial and overhead

    any solution..
    ali, Jan 12, 2007
    #1
    1. Advertising

  2. ali

    ASM Guest

    ali a écrit :
    > Hello every one
    >
    > i need you help regarding div hide and show. i am having a link like
    > <a href="#" onClick="expandWin()">show/hide </a>
    > <div id=showHide>
    >
    > </div>
    >
    >
    > within div i have lots of form tags and div elements say n. The problem
    > here is i try to hide showHide by calling function
    > function hideWin()
    > {
    >
    > document.getElementById("showHide").style.visibility="hidden";
    > }
    > but divs within above div don't get hide.


    What do you mean by "above" divs ?
    previous divs ?
    or
    divs displayed over the showHide div ?
    or
    divs contained by showHide ?

    > one way is to loop through all divs and made their visibility="hidden"
    > but it can't work for me as i have to hide a particular portion of web
    > page and no of divs within that protion is unknown. and making all divs
    > hidden by getElementByID(DivId) is impractial and overhead
    >
    > any solution..


    Your page as described seems curiously built ...
    (all elements in absolute, no ?)


    --
    Stephane Moriaux et son (moins) vieux Mac déjà dépassé
    Stephane Moriaux and his (less) old Mac already out of date
    ASM, Jan 12, 2007
    #2
    1. Advertising

  3. ali

    ali Guest

    i need you help regarding div hide and show. i am having a link like
    <a href="#" onClick="expandWin()">show/hide </a>
    <div id=showHide>

    </div>


    within div i have lots of form tags and div elements say n. The problem
    here is i try to hide showHide by calling function
    function hideWin()
    {


    document.getElementById("hideable").style.visibility="hidden";
    }

    >
    > What do you mean by "above" divs ?
    > previous divs ?
    > or
    > divs displayed over the showHide div ?
    > or
    > divs contained by showHide ?

    By divs i mean divs contined by show hide
    <div id="showHide">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3">
    <div id="div3.1">
    <input type="text" name="hideable" value="want
    to hide this text on click event">
    </div>
    </div>

    </div>

    >
    > Your page as described seems curiously built ...
    > (all elements in absolute, no ?)
    >
    >
    > --
    > Stephane Moriaux et son (moins) vieux Mac déjà dépassé
    > Stephane Moriaux and his (less) old Mac already out of date


    how can i access "id=hideable" text box to hide it
    ali, Jan 14, 2007
    #3
  4. ali

    Evertjan. Guest

    ali wrote on 14 jan 2007 in comp.lang.javascript:

    > i need you help regarding div hide and show. i am having a link like
    > <a href="#" onClick="expandWin()">show/hide </a>
    > <div id=showHide>
    >
    > </div>
    >
    >
    > within div i have lots of form tags and div elements say n. The problem
    > here is i try to hide showHide by calling function
    > function hideWin()
    > {
    >
    >
    > document.getElementById("hideable").style.visibility="hidden";
    > }
    >
    >>
    >> What do you mean by "above" divs ?
    >> previous divs ?
    >> or
    >> divs displayed over the showHide div ?
    >> or
    >> divs contained by showHide ?

    > By divs i mean divs contined by show hide
    > <div id="showHide">
    > <div id="div1"></div>
    > <div id="div2"></div>
    > <div id="div3">
    > <div id="div3.1">
    > <input type="text" name="hideable"


    add this:

    id="hideable"

    > value="want
    > to hide this text on click event">
    > </div>
    > </div>
    >
    > </div>
    >
    >>
    >> Your page as described seems curiously built ...
    >> (all elements in absolute, no ?)

    >
    > how can i access "id=hideable" text box to hide it


    and do:

    document.getElementById("hideable").style.visibility="hidden";

    or do:

    document.getElementById("hideable").style.visibility="div3.1";

    Remember, on a page the id's need to be named uniquely!

    However, perhaps you want something like this:

    ================================================
    <script type='text/javascript'>

    function toggle(id,n) {
    var el = document.getElementById(id).childNodes
    for (i=0;i<el.length;i++)
    if (el.firstChild.className == 'hideable' + n)
    el.firstChild.style.visibility =
    (el.firstChild.style.visibility=='')?'hidden':'';
    }

    </script>

    <div id='showHide'>
    <div>something else</div>
    <div>
    <input type='text' name='hideable' class='hideable1'
    value='input 1 want to show/hide this on click event'>
    </div>
    <div>
    <input type='text' name='hideable' class='hideable2'
    value='input 2 want to show/hide this on click event'>
    </div>
    <div>
    <input type='text' name='hideable' class='hideable3'
    value='input 3 want to show/hide this on click event'>
    </div>
    </div>

    <a href='#' onClick='toggle("showHide",1)'>show/hide 1</a><br>
    <a href='#' onClick='toggle("showHide",2)'>show/hide 2</a><br>
    <a href='#' onClick='toggle("showHide",3)'>show/hide 3</a><br>
    ================================================

    only ie7 tested!

    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
    Evertjan., Jan 14, 2007
    #4
  5. ali

    ASM Guest

    ali a écrit :
    > i need you help regarding div hide and show. i am having a link like
    > <a href="#" onClick="expandWin()">show/hide </a>


    > here is i try to hide showHide by calling function
    > function hideWin()
    > {
    > document.getElementById("hideable").style.visibility="hidden";
    > }
    >
    > <div id="showHide">
    > <div id="div1"></div>
    > <div id="div2"></div>
    > <div id="div3">
    > <div id="div3.1">
    > <input type="text" name="hideable"
    > value="want to hide this text on click event">
    > </div>
    > </div>
    > </div>


    In fact you want to hide the div 'div3.1' no ?

    If yes :
    function hideWin() {
    var d = document.getElementById("div3.1").style;
    d.visibility = d.visibility==""? "hidden" : "";
    }

    Or to switch between show and hide :

    function ShowHide(idDiv) {
    var d = document.getElementById(idDiv).style;
    d.visibility = d.visibility==""? "hidden" : "";
    return false;
    }

    <a href="#" onclick="ShowHide('div3.1');">
    show/hide div 'div3.1'
    </a>


    Now, if you want to hide an element of your form, it is better to call
    this element by forms tree :

    function hidder(form_name, element_name) {
    document.forms[form_name].elements[element_name].style.visibility='hidden';
    }

    <a href="#" onclick="hidder('myForm','hideable');">
    hide textfield "hideable"
    </a>


    --
    Stephane Moriaux et son (moins) vieux Mac déjà dépassé
    ASM, Jan 14, 2007
    #5
  6. ali

    ASM Guest

    ASM a écrit :
    >
    > In fact you want to hide the div 'div3.1' no ?
    >
    > If yes :


    function Hide(idDiv) {
    document.getElementById(idDiv).style.visibility = "hidden";
    return false;
    }

    <a href="#" onclick="Hide('div3.1');">
    hide div 'div3.1' and its textfield
    </a>

    --
    Stephane Moriaux et son (moins) vieux Mac déjà dépassé
    Stephane Moriaux and his (less) old Mac already out of date
    ASM, Jan 14, 2007
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. dje
    Replies:
    5
    Views:
    1,699
    =?Utf-8?B?Q2hyaXM=?=
    Dec 2, 2004
  2. Miguel Dias Moura

    How to hide/show a div?

    Miguel Dias Moura, Jan 9, 2005, in forum: ASP .Net
    Replies:
    4
    Views:
    10,212
    Rob Labbe \(Lowney\)
    Jan 9, 2005
  3. Shapper

    Hide and Show Div on Page_Load

    Shapper, May 20, 2005, in forum: ASP .Net
    Replies:
    3
    Views:
    12,511
  4. Ryh
    Replies:
    3
    Views:
    369
  5. ll
    Replies:
    2
    Views:
    642
    Thomas 'PointedEars' Lahn
    May 1, 2008
Loading...

Share This Page