/    Sign up×
Community /Pin to ProfileBookmark

Collapse/Expand Div with initial offset height ?

Copy linkTweet thisAlerts:
Mar 19.2010

Has anyone seen a script like this or would be willing to help out with one?

——–

Collapse/Expand Button
——–

The div to be expanded partially open (giving a preview in essence)

——–

After the button is presed then the div would expand to show the entire contents (with a nice fade effect). If you chose to collapse the div then it would return to the original offset (preview) height.

Has anyone seen anything like this? I’ve found a plethora of these scripts that fully expand or collapse, but not like this

Thank you for any help!!

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@zidaine_38Mar 19.2010 — Use jCast tool.

[CODE]

<input type="button" id="toggle" value=" Show " />
<div id="content"><p>Some Content</p></div>

<script type="text/javascript">
//ON you javascript code
jCast ({
"#toggle": {
"&#37;mode": 'hide',
":click": {
"/%mode": {
hide: {
script: function () {$ (this). attr ("value", "Show")},
"#content": {hidden: "yes"},
"%mode": 'show'
},
show: {
script: function () {$ (this). attr ("value", "Hide")},
"#content": {hidden: "no"},
"%mode": 'hide'
}
}
}
},
"#content": {background: "#678", border: "1px solid black"}
});
</script>
[/CODE]


when button was pressed, it will hide the div with id #content.


Heres the link to jCast tuts.

http://www.webdeveloper.com/forum/showthread.php?p=1075898#post1075898
Copy linkTweet thisAlerts:
@darkusauthorMar 19.2010 — Thanks but that still completly hides the data inside the DIV. What I really need is a way for it to display a small snippet initially (div height defined or otherwise) which would then expand when clicked to show the entire DIV contents.

Thank you
Copy linkTweet thisAlerts:
@zidaine_38Mar 20.2010 — We just configure the settings like this...

[CODE]<input type="button" id="toggle" value=" Show " />
<div id="content"><p>Some Content</p></div>

<script type="text/javascript">
//ON you javascript code
jCast ({
"#toggle": {
"&#37;mode": 'hide',
":click": {
"/%mode": {
hide: {
script: function () {$ (this). attr ("value", "Show")},
"#content": {_height: "3.5cm"},
"%mode": 'show'
},
show: {
script: function () {$ (this). attr ("value", "Hide")},
"#content": {_height: "6in"}, //[I][COLOR="Green"]set the height here when showed[/COLOR][/I]
"%mode": 'hide'
}
}
}
},
"#content": {background: "#678", border: "1px solid black", dim: ["6in", "3.5cm"]} //[B][COLOR="Red"]set the default dimension here[/COLOR][/B]
});
</script>[/CODE]
×

Success!

Help @darkus 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.28,
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,
)...