SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: Show / hide div

  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Show / hide div

    Hi all,

    I am using the following script to show and hide div's

    The Javascript
    Code:
    var active_div_id = '';
     
    function HideContent(d) {
    if(d.length < 1) { return; }
    document.getElementById(d).style.display = "none";
    }
    function ShowContent(d) {
    if(d.length < 1) { return; }
    HideContent(active_div_id);  // Hide active id.
    document.getElementById(d).style.display = "block";
    active_div_id=d;  // New active id.
    }
    function ReverseContentDisplay(d) {
    if(d.length < 1) { return; }
    if(document.getElementById(d).style.display == "none") 
      ShowContent(d);  // Code changed here!!!
    else 
      HideContent(d); // Code changed here!!!
    }
    The hidden divs
    PHP Code:
    echo "<div id=\"rub"$rubriek ."\" style=\"display:none; overflow:visible; height:auto;\">" 
    The link:
    PHP Code:
    echo "<a href=\"javascript:ReverseContentDisplay('rub".$row['r_id']."')\">" .$rubriek"</a>\n"
    This works great, however all items are hidden from start. I want one "rub1" to show when nothing has been clicked yet. It should hide when another link is clicked. Anyone could help me out?

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Where the php code has display: none; you may need an if condition.

    Code php:
    echo "<div id=\"rub". $rubriek ."\" style=\"";
    if ($rubriek != 1) {
        echo "display:none; ";
    }
    echo "overflow:visible; height:auto;\">"
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply.

    It doesn't work because now i do get category 1 from start, but it won't hide anymore if you click something else.

    I agree there should be some kind of if-statement but in Javascript though. My JS knowledge is pretty bad though.

    I think it should be something like

    if(empty(ReverseContentDisplay())
    {
    ReverseContentDisplay('rub1');
    }

    Something like that but then ofcoarse in decent JS. I don't know what variables to use..

  4. #4
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried this myself but it didn't change anything.

    Original (see whole script in startpost):
    Code:
    if(d.length < 1) { return; }
    Into this:
    Code:
    if(d.length < 1)
    {
    	if(document.getElementById('rub1').style.display == "none") 
      	ShowContent('rub1');
    	else 
      	HideContent('rub1');
    }

  5. #5
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,807
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    if you know that you want rub1 displayed initially, cant you just use....
    Code:
    <body onload="ShowContent('rub1');">
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  6. #6
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes it can! Thanks for the help.

    One more question. The stripped HTML now looks something like this:

    HTML Code:
    <form>
    <div id=rub1>Content</div>
    <div id=rub2>Content</div>
    <div id=rub3>Content</div>
    <div id=rub4>Content</div>
    <input name="" type="button" />
    </form>
    Using the menu visitors can turn 1 to 4 on and off. The button remains active. However. I want the button to hide when ALL items are hidden? Is that possible?

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    You may want to give the button an identifier so that the script can easily work with it. Once you've named the button, you can call the following updateButton function whenever you hide things.

    Code javascript:
    function hasVisibleRub() {
        var hasVisible = false,
            i = 1,
            el = document.getElementById('rub' + i);
        while (el) {
            if (el.style.display !== 'none') {
                hasVisible = true;
            }
            el = document.getElementById('rub' + i);
            i += 1;
        }
        return hasVisible;
    }
    function updateButton() {
        var el = document.getElementById('myButton');
        if (hasVisibleRub()) {
            el.style.display = '';
        } else {
            el.style.display = 'none';
        }
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply, work likes a charm! Code looks nice as well.

    I need to learn Javascript and it's structure better.

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    It's tempting to take the lazy way out and just place updateButton at the end of the ReverseContentDisplay function, but that's a bad idea because the ReverseContentDisplay should not need to know anything about the button.

    So, Instead create a function that performs both tasks.

    Code javascript:
    function reverseContent(el) {
        ReverseContentDisplay(el);
        updateButton();
    }

    I should note too that the javascript: part in the link is normally not required. Instead what typically happens, for compatibility with no javascript situations, is that the id field goes in the link as "#id", and the onclick attribute is used for the scripting.

    Code php:
    echo "<a href=\"#rub".$row['r_id']."\" onclick=\"reverseContent('rub".$row['r_id']."')\">" .$rubriek. "</a>\n";

    You could also use a temporary variable to make the code cleaner, and use the heredoc technique so that quotes don't need to be escaped.

    Code php:
    $id = 'rub".$row['r_id'];
    echo <<<EOT
    <a href="#$id" onclick="reverseContent($id)">$rubriek</a>\n
    EOT

    You don't have to do that of course, but the above does make the code easier to read and understand.

    Oh, and if you don't want to use the \n, you can leave a blank line before the EOT. This won't leave a blank line in the code, just a carriage return.

    Code php:
    $id = 'rub".$row['r_id'];
    echo <<<EOT
    <a href="#$id" onclick="reverseContent($id)">$rubriek</a>
     
    EOT
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •