SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    John 8:24 JREAM's Avatar
    Join Date
    Sep 2007
    Location
    Florida
    Posts
    1,508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Show/Hide Div for anything?

    I was looking for a show/hide js but everything seems to want to use animation or its a ton of code, I am not very good in js but i understand its similar to php, so if anyone is willing to help me do this I'd appreciate it.

    I want a button that shows and hides a DIV's content, and I want to do it in a function call:

    Code JavaScript:
    function showhide(id){
        if (getElementByID(id) == clicked) { visible == true;}
        else { visible == false;}
    }

    (Basically if its visible, the link hides it, if its hidden the link shows it)
    Then in any DIV container it would appear like:

    Code JavaScript:
    <div onclick="return showhide('settings')" >
    .. content here that shows/hides,,
    </div>

    I think Im KIND OF on the right track but I am missing something to make it function right

  2. #2
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <script type="text/javascript">
    function toggle() {
      var style = document.getElementById('text').style;
      style.display = (style.display == 'none') ? 'block' : 'none';
    }
    </script>
    <button onclick="toggle();">Click me to hide/show the text below</button>
    <div id="text">Lorem ipsum ....</div>
    I'm creating trouble-free Apache, PHP, MySQL installer, WITSuite,
    and use it to setup my development environment.
    Demo, support, contact. Questions?

  3. #3
    John 8:24 JREAM's Avatar
    Join Date
    Sep 2007
    Location
    Florida
    Posts
    1,508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How come this doesnt work, because i need it to apply to several different ID's or do i need to have toggle1 toggle2, etc?

    <script type="text/javascript">
    function toggle(id) {
    var style = document.getElementById('id').style;
    style.display = (style.display == 'none') ? 'block' : 'none';
    }
    </script>

  4. #4
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    id is a variable, not a string. You quoted it.

  5. #5
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can try this code if you want to hide several divs at once.
    Code:
    <script type="text/javascript">
    function toggle() {
      for (var i = 0; i < arguments.length; i++) {
        var style = document.getElementById(arguments[i]).style;
        style.display = (style.display == 'none') ? 'block' : 'none';
      }
    }
    </script>
    <button onclick="toggle('text1', 'text2', 'text3');">Click me to hide/show the text below</button>
    <div id="text1">Lorem ipsum ....</div>
    <div id="text2">Lorem ipsum ....</div>
    <div id="text3">Lorem ipsum ....</div>
    I'm creating trouble-free Apache, PHP, MySQL installer, WITSuite,
    and use it to setup my development environment.
    Demo, support, contact. Questions?

  6. #6
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just as a btw, it's probably best not to set the divs back to "block" since that may not be how they've been styled in CSS. To make sure the div goes back to it's styled instance just leave the display property blank when showing it:

    Code JavaScript:
    style.display = (style.display == 'none') ? '' : 'none'; // Notice the empty '...'
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)


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
  •