/    Sign up×
Community /Pin to ProfileBookmark

Simply show/hide on radio click…NOT WORKING!

Copy linkTweet thisAlerts:
Jul 31.2012

Hello all!

I hope somebody can peak at my code and tell me what I’m doing wrong!

I simply want to ‘show’ the div#logo upon a radio click. I’ve poured through forums and tutorials and tried multiple versions but can’t get it to work ?

Due to my firewall, I’m unable to upload the files so I zipped them up for you.

Basically, when you click ‘personalize’ options will slide open (at least I got THAT to work!). I have set the first radio button under ‘Left Chest’ to show a hidden div.

Thanks so much!

Len

to post a comment
JavaScript

11 Comments(s) ↴

Copy linkTweet thisAlerts:
@lprintzauthorJul 31.2012 — A lot of views but no help yet ?

Perhaps people are freaking out that I attached a .zip? If that's the case, I was able to upload the page to http://www.gymnasticsvillage.com/jquery-problem/

Can somebody bail me out?
Copy linkTweet thisAlerts:
@WilliamsunAug 01.2012 — This explains it pretty well:

http://interestingwebs.blogspot.com/2009/01/how-to-show-and-hide-html-elements.html

Just change input type="radio" to input type="checkbox"
Copy linkTweet thisAlerts:
@WilliamsunAug 01.2012 — This is a better example to show/hide:

<head>

<script>

function toggle(id) {

if (document.getElementById(id).style.display == 'none') {

document.getElementById(id).style.display = 'block';

} else {

document.getElementById(id).style.display = 'none';

}

}

</script>

</head>

<body>

<input type="checkbox" name="details" value="Yes" onclick="toggle('detailcomments')"> <br />

<div id="detailcomments" style="display:none;">

<textarea rows="5" name="comments_item-##" cols="64" maxlength="1000"></textarea></div>

EDIT:

Thanks to TheAliveWinner for this piece of code. It took me a while to find the thread.

http://www.webdeveloper.com/forum/showthread.php?t=263052&highlight=javascript
Copy linkTweet thisAlerts:
@jiezhiyuseAug 01.2012 — If only considering the functionality you want to implement, Please change your code starting from line 107 as follows,

function showorhide()-----> delete the parameters "#logo"

document.getElementById('logo')-----delete the "#"
Copy linkTweet thisAlerts:
@jiezhiyuseAug 01.2012 — change the code as follow, you will get what you want...

function showorhide()----> delete parameters "#logo"

document.getElementById('logo')-----> delete symbol "#"
Copy linkTweet thisAlerts:
@lprintzauthorAug 01.2012 — Thanks jiezhiyuse

Yours seemed like the simplest solution, however, it didn't work ?

Here's my code now...

<script type="text/javascript">

function showorhide(){

if(document.getElementById('logo')){ //check the element exists and can be accessed

var ele = document.getElementById('logo'); //get hold of the element

if(ele.style.display=="none"){ //see if display property is set to none

ele.style.display="block";


}else{

ele.style.display="none";


}

}

}

</script>

I tried both:

function showorhide()

function showorhide('')
Copy linkTweet thisAlerts:
@lprintzauthorAug 01.2012 — I just tried somebody else's suggestion and it didn't work either!

Soooo...I pulled out JUST the code needed onto a blank page and it works fine so there must be some sort of conflict????

Here's the simple code that works...it just doesn't work when I add it to the page...God help me!

<script language="javascript">

function showOrHide()

{

var div = document.getElementById("logo");

if (div.style.display == "block")

{

div.style.display = "none";

}

else

{

div.style.display = "block";

}

}

</script>

<input style="border:none;" onClick="javascript:showOrHide();" name="leftChest" type="radio" value="" />

<div id="logo" style="display:none;"><img src="../images/cart/logo.jpg" /></div>
Copy linkTweet thisAlerts:
@lprintzauthorAug 01.2012 — Hi guys!

I feel we're inching closer to the solution...

I've added a new page - www.gymnasticsvillage.com/jquery-problem/index2.html

The code on this page DOES WORK when on a separated out onto a stripped down page (www.gymnasticsvillage.com/jquery-problem/showhide.html)...SOMETHING is causing a conflict

Thoughts?

Len
Copy linkTweet thisAlerts:
@lprintzauthorAug 02.2012 — SOLVED!

I had duplicate ids so NOTHING would've worked!

Thanks everyone for your help
Copy linkTweet thisAlerts:
@donatelloAug 02.2012 — I had played with a JSFiddle that was working and can't remember where it was... I should keep track...

Can you post the working version in a Fiddle? I'm always looking for cool Web 2.0 stuff that I can use on some of my pages.

Here is one of my own original ones that I wrote that you might like... it's very cool (I think) and uses a bit of JS and CSS3... check it out:

http://jsfiddle.net/hxzRq/1/
Copy linkTweet thisAlerts:
@donatelloAug 03.2012 — http://jsfiddle.net/sPp7q/

Doesn't toggle for multiple radio buttons though... unless there is a newer version...
×

Success!

Help @lprintz spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.30,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...