How to use Javascript or Jquery to toggle the visibility of a html div

Question

I'm creating a basic site and I've got the following script that hides a div:

<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>

<a href="#" onclick="toggle_visibility('description');">Show/Hide Description</a>

<div id="description">
<br>
<br>
<p>This is a test paragraph</p>
</div>

When I load the page, the default is that the text is shown. How can I hide the text inside the div each time the page is loaded?

I want the user to manually click the button to view the text.

EDIT:

I've now added a picture of a + symbol, so that a user can click the + and the text appears by using the following lines:

  <h4>Backstory</h4> 

  <img alt="" style="width: 20px; height: 20px;" src="./images/headerExpand.png" a href="#" onclick="toggle_visibility('backstory');">Show/Hide Description</a>

<div id="backstory" style="display: none">
<br>
   <p>This is a new block of text</p>
</div>

The ./images/headerExpand.png is the icon of the + symbol

How would I change the + icon to a - icon once the + icon has been clicked?

Thanks.

Arun P Johny · Accepted Answer · 2014-01-02 15:35:18Z

4

set the display to none

<div id="description" style="display: none">

A redesigned solution might look like

<!-- Add a class toggler and the id of the target element as the href-->
<a href="#description" class="toggler">Show/Hide Description</a>

<!-- Add a class hidden so that the element is hidden when the page loads -->
<div id="description" class="hidden">
    <br/>
    <br/>
    <p>This is a test paragraph</p>
</div>

CSS

.hidden {
    display: none;
}

then jQuery script

// dom ready handler
jQuery(function () {
    //register a click handelr for all anchor elements with class toggler
    $('a.toggler').click(function (e) {
        //prevent the default action of the event
        e.preventDefault();
        //togger the visibility of the element targetted by the href
        $($(this).attr('href')).toggle()
    });
})

Demo: Fiddle

edited Jan 2, 2014 at 15:35

answered Jan 2, 2014 at 15:27

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

BubbleMonster Over a year ago

Thank you that works great. I've added a bit more to my original question. I have a + symbol icon, so now when I click it, my text appears. That's great, but the + icon stays there. How can I make the icon change to a - icon? Thanks again.

BubbleMonster Over a year ago

Added at the bottom of original question. Here is the actual line: <img alt="" style="width: 20px; height: 20px;" src="./images/headerExpand.png" a href="#" onclick="toggle_visibility('backstory');">Show/Hide Description</a>

Voltrone · Accepted Answer · 2014-01-02 15:27:59Z

1

use symply CSS :

<p style="display:none;">This is a test paragraph</p>

answered Jan 2, 2014 at 15:27

Voltrone

2911 silver badge5 bronze badges

Comments

Scott Selby · Accepted Answer · 2014-01-02 15:31:41Z

0

you have 2 options , set the css property right in the html like the other answers

<div id="description" style="display: none">

or wrap your javascript in something to tell the page to run the stript on page load

using jQuery

$(document).ready(function(){
   //your code
});

or

$(function(){
  //your code
});

or regular old javascript

window.onload = function(){
  //your code
});

answered Jan 2, 2014 at 15:31

Scott Selby

9,58012 gold badges63 silver badges97 bronze badges

Collectives™ on Stack Overflow

How to use Javascript or Jquery to toggle the visibility of a html div

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related