Change multiple div styles onclick

Discussion in 'JavaScript' started by Silver89, Nov 1, 2008.

  1. #1
    Hi,

    I'm trying to change multiple divs onclick with javscript,

    Currently I can change one div no problem with:

    <div class="navBack" onclick="this.className='catBack''">
    
    Code (markup):
    However I want it to do the following:

    <div class="navBack" onclick="this.className='catBack'&div.closeCross.style='display:none'">
    
    Code (markup):
    Thanks
     
    Silver89, Nov 1, 2008 IP
  2. tarponkeith

    tarponkeith Well-Known Member

    Messages:
    4,758
    Likes Received:
    279
    Best Answers:
    0
    Trophy Points:
    180
    #2
    onclick="this.className='catBack';div.closeCross.style='display:none';"
    Code (markup):
    Maybe?

    I'll test it right now...

    Yeah, this worked in FF:

    
    <html>
    <head>
    
    <style>
    .className1 { background-color: #000; }
    .className2 { background-color: #f0f; }
    </style>
    
    </head>
    <body>
    
    <div id="hi" onclick="this.className='className1';">a</div>
    <div id="hi2" onclick="hi.className='className2';this.className='classname1';">b</div>
    
    </body>
    </html>
    Code (markup):
     
    tarponkeith, Nov 1, 2008 IP
  3. Silver89

    Silver89 Notable Member

    Messages:
    2,243
    Likes Received:
    72
    Best Answers:
    0
    Trophy Points:
    205
    #3
    The problem now is that it doesn't apply the display:none to divs within the div, can this be sorted easy?
     
    Silver89, Nov 1, 2008 IP
  4. tarponkeith

    tarponkeith Well-Known Member

    Messages:
    4,758
    Likes Received:
    279
    Best Answers:
    0
    Trophy Points:
    180
    #4
    you could put the "display:none" in a class, like this:
    <html>
    <head>
    
    <style>
    .className1 { background-color: #000; }
    .className2 { background-color: #f0f; }
    .className3 { display: none; }
    </style>
    
    </head>
    <body>
    
    <div id="hi" onclick="this.className='className1';">a</div>
    <div id="hi2" onclick="hi.className='className2';this.className='className3';">b</div>
    
    </body>
    </html>
    Code (markup):
     
    tarponkeith, Nov 1, 2008 IP
    Silver89 likes this.