#1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    676
    Rep Power
    7

    How-to show/hide content within a DIV tag


    Well, I simply have 2 sets of code, each held within its own DIV. I wish, as a user selects an item from the drop-down, for the checkSick() function to run, and show/hide the appropriate DIV elements. As I try running this, nothing seems to process/change. Am I using onchange incorrectly for a drop-down?

    Code:
    function checkSick() {
      if(document.getElementById('type').value == "sick") {
        document.getElementById('sick').style.display = "block"
        document.getElementById('personal').style.display = "none"
      } else {
        document.getElementById('sick').style.display = "none"
        document.getElementById('personal').style.display = "block"
      }
    }
    Code:
    <SELECT name="type" id="type" onchange="checkSick();">
      <OPTION value="appt">Appointment</OPTION>
      <OPTION value="bereavement">Bereavement</OPTION>
      <OPTION value="jury">Jury Duty</OPTION>
      <OPTION value="military">Military</OPTION>
      <OPTION value="sick">Sick</OPTION>
      <OPTION value="vacation">Vacation</OPTION>
      <OPTION value="wopay">Time Off Without Pay</OPTION>
      <OPTION value="other">Other</OPTION>
    </SELECT>
    Code:
    <DIV id="personal">
      <TR>
        <TD>
          Normal coding
        </TD>
      </TR>
    </DIV>
    <DIV id="sick">
      <TR>
        <TD>
          Sick day coding
        </TD>
      </TR>
    </DIV>
    Last edited by Triple_Nothing; March 25th, 2013 at 11:03 AM.
  2. #2
  3. No Profile Picture
    Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,008
    Rep Power
    2791
    Your SELECT does not have an ID.
    [PHP] | [Perl] | [Python] | [Java] != [JavaScript] | [XML] | [ANSI C] | [C++] | [LUA] | [MySQL] | [FirebirdSQL] | [PostgreSQL] | [HTML] | [XHTML] | [CSS]

    W3Fools - A W3Schools Intervention.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    676
    Rep Power
    7
    Heh. Always gotta love the basic things one overlooks.

    Well, I added the id in, but no change in actions. Anything else I may be overlooking?

    I did move the 'id' tag to an internal element, and it did hide that as desired, so I think I may be looking at this wrong. I want not just the DIV tag itself to hide, but all content within. Am I going the right way about this?
    Last edited by Triple_Nothing; March 25th, 2013 at 10:32 AM.
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4304
    <tr> elements may not be direct children of a <div> element. Perhaps you should be using <tbody> elements instead of the <div>s.

    Also instead of specifically setting the display to "block", I suggest you set it to an empty string in your script.

    P.S. Your function is going to be very inefficient if you expand it to work for all 8 options without restructuring the logic.
    Last edited by Kravvitz; March 26th, 2013 at 12:08 AM.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    676
    Rep Power
    7
    Thanks with that note. That was enough for me to alter and build what would work. Since it was 3 rows to be either this or that, I just made them their own tables within the parent's TD and ID'd each of those tables to show/hide.
  10. #6
  11. No Profile Picture
    Banned
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Location
    New York
    Posts
    28
    Rep Power
    0
    I think you have missed ID ,but you said you have added the ID in ,But still you gotta same problem means .Somewhere you miss placed the codings or the items.
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    676
    Rep Power
    7
    Kravvitz was right with his first comment. I was placing the 'id' in my DIV tags, and found out the inner TR and TD items were not direct children of such. So, I just made individual tables of the 2 sets of 3 rows I was trying to swap, and applied the 'id' to the TABLE tag of each one. This worked out just fine.

IMN logo majestic logo threadwatch logo seochat tools logo