PDA

View Full Version : collapsing and expanding portions of text


mikeherman
12-22-2010, 10:06 PM
I have a paragraph which i want to expand and collapse. I only want 3/4 of the text to do this. when the user clicks "more details" then the text expands. "more details" changes to "less details". When the user clicks less details the text goes back to the collapsed version of the paragraph.

Im an amateur web developer, not too savvy when it comes to coding. Im guessing this is a javascript, but can dreamweaver easily do this with a few mouse clicks?

Corrosive
12-23-2010, 09:01 AM
I think you can do this with Spry.

jmichae3
12-26-2010, 09:39 AM
you can also do it with css class switching using javascript or using :hover.

.block_on {
display:block;
visibility:visible;
}
.block_off {
display:none;
visibility:hidden;
list-style-type:none;
width:0px;
}
/**********************/
div.blok:hover {
display:block;
visibility:visible;
}
div.blok:active {
display:none;
visibility:hidden;
list-style-type:none;
width:0px;
}



with the first one you would
<script type="text/javascript">
window.flipstate="on"
function doit() {
//toggle the state of the 2-state state machine
if ('off' == window.flipstate) {
window.flipstate = 'on';
document.getElementById('myDivId').className='bloc k_on';
} else {
window.flipstate = 'off';
document.getElementById('myDivId').className='bloc k_off';
}
if
}
</script>
<div id="myDivId" onclick="doit()" class="block_on">
blah blah blah
</div>

and with the 2nd one you would
<div class="blok">blah blah blah</div>
and you just hover over it, I think.