Show Hide Div Using Image -javascript

I am trying to follow a demonstration online, which allows you to click on an image, and it will close a div which contails some text.

I want to modify this though,  I want the div to be closed when opening the page, and when you click the button image, the div will open.

I am using this in wordpress, and have a gravity form which i want to show, once somebody clicks the button.  But i cannot seem to get this to work. It correctly closes the div containing the form, but appears open when you visit the page for the first time.

Here is the code i am using.

 
// JavaScript Document
function toggle5(showHideDiv, switchImgTag) {
        var ele = document.getElementById(showHideDiv);
        var imageEle = document.getElementById(switchImgTag);
        if(ele.style.display == "block") {
                ele.style.display = "none";
		imageEle.innerHTML = '<img src="http://localhost/drughelpdesk/wp-includes/images/plus.png">';
        }
        else {
                ele.style.display = "block";
                imageEle.innerHTML = '<img src="http://localhost/drughelpdesk/wp-includes/images/minus.png">';
        }
}

Open in new window

<div id="headerDivImg">
    <a id="imageDivLink" href="javascript:toggle5('contentDivImg', 'imageDivLink');"><img src="http://localhost/drughelpdesk/wp-includes/images/minus.png"></a>
</div>
<div id="contentDivImg" style="display: block;">[gravityform id=7 name=10Panel Drug Testing Kit With Lab Confirmation title=false ajax=true]</div>

Open in new window


I'm following the "let's uses images demo" situated here
Jon ImmsWeb DeveloperAsked:
Who is Participating?
 
Jeffrey Dake Senior Director of TechnologyCommented:
If I understand correctly you just want to switch the div to be closed by default.  Just change the div to start with display:none

<div id="headerDivImg">
    <a id="imageDivLink" href="javascript:toggle5('contentDivImg', 'imageDivLink');"><img src="http://localhost/drughelpdesk/wp-includes/images/minus.png"></a>
</div>
<div id="contentDivImg" style="display: none;">[gravityform id=7 name=10Panel Drug Testing Kit With Lab Confirmation title=false ajax=true]</div>

Open in new window

0
 
GamesNET2Commented:
Look up the .toggle attribute using jquery - here is a link, this should sort you problem. http://api.jquery.com/toggle/
0
 
Jon ImmsWeb DeveloperAuthor Commented:
Sorry, That did not help,  People are asking the same question as me on that page, and it has not been answered in 2 months.  All those querys on the page, all show the contents of the div first, and then clicking on the image closes it. I want the div to be closed by default, and clicking the image opens the div which contains my form.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
GamesNET2Commented:
Ah ok, set the display: none; in the css for the div, that means it will load hidden. Then using the toggle jquery you can then show it,

so

.yourdivclass {display: none;}

$(function() {
$(".yourdivclass").click(function() {$(this).Toggle();});
});

Something like that - (that might be slightly wrong but you get the idea....
0
 
Jon ImmsWeb DeveloperAuthor Commented:
Still cannot do it :(     It keeps on showing the Image, and the div containing my form by default. Clicking the image hides the div containing the form.
0
 
Jon ImmsWeb DeveloperAuthor Commented:
Perfect. Just what i needed thank you.
0
 
GamesNET2Commented:
Am I going mad - is that not what I said?!
0
 
Jon ImmsWeb DeveloperAuthor Commented:
No, it's not what you said.

You said
"something like that", " might be wrong"
. That did not help me.
0
 
GamesNET2Commented:
Ah I thought display: none fixed it. oh well.
0
 
Jon ImmsWeb DeveloperAuthor Commented:
I did try your solution but it did not work for me,  The solution the other guy gave was exactly what i needed.  Thank you for your help though.  Not having a go at you or anything :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.