CODEWITHSUNDEEP
javascripthtmlcssshow-hide
Brian
Brian

Reputation: 115

Show/Hide Image DIV

I want the image to act as a toggle so when it's clicked on it will reveal the div with the text.

Here's the CSS class I'm using:

.hidden { display: none; }
.unhidden { display: block; }

and the JS:

 function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
  }
}//

Here's the HTML:

<div class="4u">                    
   <!-- Box -->
   <section class="box box-feature">
      <a href="javascript:unhide('test');" class="image image-full" 
      <img src="images/pic01.jpg" alt="" /></a>
   <div id="test" class="hidden">
       <header>
       <h2>Put something here</h2>
       <span class="byline">Maybe here as well I think</span>
       </header>
<p>Test and more text and more text and more text.</p>
    </div>                          
   </section>
  </div>

Upvotes: 1

Views: 1483

Answers (1)

Geoffrey Booth
Geoffrey Booth

Reputation: 7366

You have a syntax error. Change line 4 to:

  <a href="javascript:unhide('test');" class="image image-full">

Note the > at the end of the line.

Unless you're determined to use vanilla JavaScript, a much easier way would be to use jQuery. Add this to your <head>:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

And then your a href could be just javascript:$('#test').toggle() and you wouldn't need to define any functions or CSS classes.

Upvotes: 1

Related Questions