Solved

Show Hide Div Using Image  -javascript

Posted on 2011-03-21
10
726 Views
Last Modified: 2012-08-14
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
0
Comment
Question by:Jon Imms
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
10 Comments
 
LVL 1

Expert Comment

by:GamesNET2
ID: 35184891
Look up the .toggle attribute using jquery - here is a link, this should sort you problem. http://api.jquery.com/toggle/
0
 

Author Comment

by:Jon Imms
ID: 35184956
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
 
LVL 1

Expert Comment

by:GamesNET2
ID: 35185001
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:Jon Imms
ID: 35185114
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
 
LVL 10

Accepted Solution

by:
Jeffrey Dake earned 500 total points
ID: 35185974
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
 

Author Closing Comment

by:Jon Imms
ID: 35186043
Perfect. Just what i needed thank you.
0
 
LVL 1

Expert Comment

by:GamesNET2
ID: 35186205
Am I going mad - is that not what I said?!
0
 

Author Comment

by:Jon Imms
ID: 35190051
No, it's not what you said.

You said
"something like that", " might be wrong"
. That did not help me.
0
 
LVL 1

Expert Comment

by:GamesNET2
ID: 35190120
Ah I thought display: none fixed it. oh well.
0
 

Author Comment

by:Jon Imms
ID: 35190147
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

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How to size popup in jquery mobile 4 60
Horizontal Full Calendar using php 5 42
Pass a js value to an html form 5 42
Google Chrome: Debugging AJAX call 6 38
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article shows the steps required to install WordPress on Azure. Web Apps, Mobile Apps, API Apps, or Functions, in Azure all these run in an App Service plan. WordPress is no exception and requires an App Service Plan and Database to install
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

732 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question