how do i slide blocks of text with javascript?

snthr · 2008-08-09 15:58:14

hi…

i’m hoping to use an effect similar to this demo for a site i’m doing. i want to have an article page with a chunk of text, and a toggle switch which will ‘reveal’ the rest of the text when clicked.

there are, of course, a lot of bits of javascript online that do something along these lines, some better than others.

before i start doing endless google searches for ‘javascript text slide’ and the like, i was hoping some of you might have tried to do something similar to this before.

if so, are there any plugins that give any kind of straightforward way of doing this?

if not, what’s the best way to go about doing it?

thanks.

Gocom · 2008-08-09 18:49:13

snthr, maybe the easiest way is just to write your own couple lines of Javascript, cause it is how things work :-)

In example just add container div and opening link to your article and then add something, like in example this, written by using jQuery (also comes alongside TXP).

$('.mylink').click(function(){
	$('.container-div').slideToggle('fast');
});

The jquery syntax is quite “anti-javascript” looking :)

Last edited by Gocom (2008-08-09 18:49:46)

renobird · 2008-08-09 19:41:39

what’s the best way to go about doing it?

jQuery is the way to go. There are other javascript libraries out there (like MooTools in the example you posted) – but IMO jQuery is the jam.

To expand on Gocom’s example:

In the <head>
<script src="/includes/jquery-1.2.6.js" type="text/javascript"></script>

<script>
//<![CDATA[
$(document).ready(function(){ $('.container-div').hide();
$('.showhide').click(function() { $('.container-div').slideToggle('fast'); return false; }); });
//]]>

</script>

In the <body>
<a href="#" class="showhide">toggle</a>

<div class="container-div">
[Content You Want To Show/Hide in goes here]
</div>

andrea · 2008-08-13 06:28:09

thanks! i was looking for something like this.. sweet and simple. ;)

snthr · 2008-08-13 18:13:44

that did the trick, thanks…

a secondary question related to this (my javascripting isn’t so hot, hence my confusion)…

how do i change the ‘toggle’ text so that it says “more” when the text is hidden, and then “less” when the text is revealed?

this is possibly very obvious, but i can’t easily see how it’s done.

thanks.

renobird wrote:

jQuery is the way to go. There are other javascript libraries out there (like MooTools in the example you posted) – but IMO jQuery is the jam.

To expand on Gocom’s example:

In the <head>
<script src="/includes/jquery-1.2.6.js" type="text/javascript"></script>

<script>
//<![CDATA[
$(document).ready(function(){ $('.container-div').hide();
$('.showhide').click(function() { $('.container-div').slideToggle('fast'); return false; }); });
//]]>

</script>

In the <body>
<a href="#" class="showhide">toggle</a>

<div class="container-div">
[Content You Want To Show/Hide in goes here]
</div>

renobird · 2008-08-13 18:20:03

snthr,

That’s a great question. I’ve seen it done, and I have used a over complicated method that I can’t remember or find right now.
I’ve posted that exact question to the jQuery mailing list – and never really got a good answer. It’s probably pretty easy though.

Anyhow, as a workaround I usually make the link say something like “show/hide details” or something like that.
I’ll be sure to report back here if I find my old solution – or get a good answer from the mailing list.

MattD · 2008-08-13 19:49:45

Change
$('.showhide').click(function() { $('.container-div').slideToggle('fast'); return false; }); });

to

$('.showhide').click(function() { 
$('.container-div').slideToggle('fast'); 
if ($('.showhide').html()=="open"){
$('.showhide').html("close");
}else{
$('.showhide').html("open");
}

Although there’s probably a better way. Change ‘open’ and ‘close’ to whatever you’d like but make sure you change ‘open’ in both spots.

renobird · 2008-08-13 19:56:09

Matt,

Thanks!

)

—
T

geoff777 · 2008-08-15 14:25:25

Anyway to have multiple expand/collapse text boxes on the same page?

Without writing new functions for container-div1 …. container-div2 etc

Thanks Geoff

mrdale · 2008-08-15 15:59:19

I think you can configure an Accordion to leave multiple items open at once.

MattD · 2008-08-15 16:56:34

Maybe you could make each article an accordian…

MattD · 2008-08-15 23:07:32

Here’s a cleaner way to handle changing the close button.

<script>
//<![CDATA[
$(document).ready(function(){ $('.container-div').hide();
$('.showhide').click(function() {
 $('.container-div').slideToggle('fast',function(){
$('.showhide').toggle();}); return false; }); }); 
//]]>
</script>

then the close button needs to be duplicated

<a href="" class="showhide">open</a>
<a href="" class="showhide" style="display: none">close</a>

If you are looking to use this for articles in an article list I’m thinking you could include this code in your article form add the article id to the class names.

<script>
//<![CDATA[
$(document).ready(function(){ $('.container-div<txp:article_id />').hide();
$('.showhide<txp:article_id />').click(function() {
                   $('.container-div<txp:article_id />').slideToggle('fast',function(){
                                   $('.showhide<txp:article_id />').toggle();}); return false; }); }); 


//]]>

</script>

<a href="" class="showhide<txp:article_id />">open</a>
<a href="" class="showhide<txp:article_id />" style="display: none">close</a>
<div class="container-div<txp:article_id />">
[Content You Want To Show/Hide in goes here]
</div>

making each article have a unique set of this code. (non-tested idea)

Textpattern CMS

Textpattern CMS support forum

#1 2008-08-09 15:58:14

how do i slide blocks of text with javascript?

#2 2008-08-09 18:49:13

Re: how do i slide blocks of text with javascript?

#3 2008-08-09 19:41:39

Re: how do i slide blocks of text with javascript?

#4 2008-08-13 06:28:09

Re: how do i slide blocks of text with javascript?

#5 2008-08-13 18:13:44

Re: how do i slide blocks of text with javascript?

#6 2008-08-13 18:20:03

Re: how do i slide blocks of text with javascript?

#7 2008-08-13 19:49:45

Re: how do i slide blocks of text with javascript?

#8 2008-08-13 19:56:09

Re: how do i slide blocks of text with javascript?

#9 2008-08-15 14:25:25

Re: how do i slide blocks of text with javascript?

#10 2008-08-15 15:59:19

Re: how do i slide blocks of text with javascript?

#11 2008-08-15 16:56:34

Re: how do i slide blocks of text with javascript?

#12 2008-08-15 23:07:32

Re: how do i slide blocks of text with javascript?

Board footer