Toggle div based on javascript

Question

i have the following script that shows a div when a link is clicked...

$(document).ready(function() {
            $('.accordion ul li h1').click(function() { $(this).parent().parent().find('.ac:visible').slideToggle().parent().removeClass('active'); if ($(this).next().is(':hidden')) $(this).next().slideToggle().parent().addClass('active'); });
        });

I also have a div on my page

<div id="shortinfo">short info</div>

How would i go about setting short info to didssapear when the link is clicked,, and reappear once its clicked again?

I tried adding

<h1 onclick="document.getElementById('shortinfo').style.display='none'">

but then i need it to reappear once its clicked again?

this is my new code, doesnt seem to work witht he toggle

 $(document).ready(function() {
            $('.accordion ul li h1').click(function() { $(this).parent().parent().find('.ac:visible').slideToggle().parent().removeClass('active'); if ($(this).next().is(':hidden')) $(this).next().slideToggle().parent().addClass('active'); });
            $('#shortinfo').toggle();

        });

jonjbar · Accepted Answer · 2011-09-07 14:40:36Z

3

As you are using JQuery, you can use Toggle method to display or hide the element: http://api.jquery.com/toggle/

You could then do the following:

$('#shortinfo').toggle();

To integrate it with your h1 onclick, it would become:

<h1 onclick="$('#shortinfo').toggle()">

answered Sep 7, 2011 at 14:40

jonjbar

4,1242 gold badges32 silver badges51 bronze badges

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

7 Comments

Bas Slagter Over a year ago

There must be something else wrong than. Toggle is the way to go here.

alice practice Over a year ago

I know have $(document).ready(function() { $('.accordion ul li h1').click(function() { $(this).parent().parent().find('.ac:visible').slideToggle().parent().removeClass('active'); if ($(this).next().is(':hidden')) $(this).next().slideToggle().parent().addClass('active'); }); $('#shortinfo').toggle(); });

jonjbar Over a year ago

Have you tried to replace your whole h1 with the latest code sample I've posted ? What version of JQuery are you using ?

alice practice Over a year ago

ahh that h1 worked :) is there a way to have it set to display block at first, then dissapear on click?\

jonjbar Over a year ago

Make it visible via CSS then toggle() will take care of the rest: if visible it will hide it and show it otherwise.

|

genesis · Accepted Answer · 2011-09-07 14:40:26Z

1

delete that onclick

$("#shortinfo").toggle();

answered Sep 7, 2011 at 14:40

genesis

51.1k20 gold badges99 silver badges127 bronze badges

2 Comments

alice practice Over a year ago

I need the shortinfo to toggle display

genesis Over a year ago

@alicepractice: yes this does exacly you need

Collectives™ on Stack Overflow

Toggle div based on javascript

2 Answers 2

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related