/    Sign up×
Community /Pin to ProfileBookmark

Click to expand, make the button disappear…

Copy linkTweet thisAlerts:
Jan 06.2012

I made a post before, but I don’t feel I explained myself verywell. I wanted to edit it to remove it, but as I’m new here I can’t.
ok so I currently have a table, with 2 (visible) rows.

<table>

<tr>
<td>
MAIN MENU HERE
</td>
</tr>

<div id=’phase1′>
<tr>
<td>
[button]click here to expand
</td>
</tr>
</div>

<div id=’phase2′>
<tr>
<td>
expanded part, bla bla bla

[button]click here to un-expand
</td>
</tr>
</div>

</table>

Basically, I want to click to expand the “expanding part”. I’ve been trying to do it myself, but I can’t figure out how to do it. First of all, I want the “click here” part to be an image that changes when you hover over it. Then when you click it, it disappears, and instead “expanded part” appears.

So, how should I do this?

Should I make a button, with a picture over it, that changes on hover? (not sure how to do this). Once clicked, the div ‘phase1′ of the button should disappear (style.display==’none’ ?), and the user should instead see something else, ‘phase2’.

But I can’t get anything to work! So I need help. (Keep in mind i’m new to javascript)
-am I approaching this the right way? Do you recommend another way?
-if so, how would I make the button? How do I put the two pictures on it?

Thanks!

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@hamburglarJan 06.2012 — Hey,

You can use Jquerr show/hide features to show the sections. Instead of table's, I would use div's. You can take a look at the example here: http://papermashup.com/simple-jquery-showhide-div/

Let me know if this is something similar to what you wanted.

Regards,

H
Copy linkTweet thisAlerts:
@xelawhoJan 06.2012 — something like this maybe (you'll have to add your own img src's)?

[CODE]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table>

<tr>
<td>
MAIN MENU HERE
</td>
</tr>

<div id='phase1'>
<tr>
<td>
<img id="small" src="smallpic.jpg" onmouseover="this.src='smallpic2.jpg'" onmouseout="this.src='smallpic.jpg'" onclick="expand()">
</td>
</tr>
</div>

<div id='phase2'>
<tr>
<td >
<div id="expanded" style="display:none">
<img src="bigpic.jpg"><br>
<input type="button" value="shrink photo" onclick="revert()">
</div>
</td>
</tr>
</div>

</table>
<script>
function expand () {
document.getElementById("small").style.display="none"
document.getElementById("expanded").style.display="block"
}
function revert () {
document.getElementById("small").style.display="block"
document.getElementById("expanded").style.display="none"
}


</script>
</body>
</html>

[/CODE]
×

Success!

Help @daniel_m 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.19,
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,
)...