tags:

views:

1087

answers:

3

Hi, im not familiar with jquery so any help would be appreciated, i have some code, (cant remember where from) that shows part of the content and then allows you to show more or less.

What i would like the code to do is exactly what it does now, but instead of just show / hide, i want it to slide down and up revealing more or less content.

THE WHOLE CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Show more less</title>

<style media="screen" type="text/css">
#mytext {width:260px;height:200px;overflow:hidden;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript">
$(document).ready(function() {
var adjustheight = 200;
$("#adjust").toggle(function() {
$('#mytext').css('height', 'auto').css('overflow', 'visible');
$(this).text("less");
}, function() {
$('#mytext').css('height', adjustheight).css('overflow', 'hidden');
$(this).text("more");
});
});
</script>

</head>

<body>

<div id="mytext">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque iaculis tincidunt tortor. Nulla turpis dui, gravida non,
varius quis, molestie sit amet, justo. Vestibulum sed elit.
Duis lobortis odio quis nisi. Praesent enim. Sed auctor commodo lectus.
In eget augue a nulla auctor interdum.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Nulla enim turpis, commodo at, feugiat nec, dapibus et, odio. Cras enim risus, sagittis eget,
ultrices quis, eleifend vel, risus. Cras a felis eu urna ornare vulputate.
Pellentesque viverra, lacus vitae tincidunt accumsan, nisi metus feugiat felis,
sed placerat est dolor et eros. Duis cursus. Maecenas sollicitudin, lorem vitae
placerat eleifend, dui elit imperdiet tellus, at convallis sapien orci sed pede.</div>
<a href="#" id="adjust">more</a>

</body>
</html>

its currently controlled by changing the height in the css any way to animate this? Thanks

+1  A: 

Have you taken a look at the slideToggle method?

// Open & Close myDiv.  Animation take 1 second (1000 ms)
$('#myDiv').slideToggle(1000);

Edit: Here's a better answer.

In your HTML, have a div for the stuff you always want to see, and another div for the things that are hidden.

<div id="alwaysShow">Here is an introduction to what I want to say.</div>
<a href="#" id="adjust">More...</a>
<div id="sometimesShow">Here is some more info that you don't always care about</div>

This way you can toggle just sometimesShow. Its not exactly what you asked for, but I think it will solve your problem.

Matt Grande
Yeah it goes crazy, im not sure where to put the code, it animates it sliding but doesnt seem to look at the height etc and just slides completly up so that there is no text visible.
To clarify, when it slides up, you want to still see the top 200px of the div (as specified in your CSS)?
Matt Grande
yea when page laods 200px of content should be visible, then pressing "more" should slide down to reveal all the content in "mytext" div , more text changes to "less" and when pressed should slide up but still showing 200px of content.
This doesn't really answer your question, but I think it could work for you. I've edited my answer to reflect your original meaning.
Matt Grande
+1  A: 

Kind of piggybacking off of Matt's answer, here's your HTML:

<div id="alwaysShow">Here is an introduction to what I want to say.</div>
<a href="#" id="adjust">More...</a>
<div id="sometimesShow">Here is some more info.</div>

Your jQuery should look like this:

<script type="text/javascript">
    $(document).ready(function() {
        $("#adjust").toggle(function() {
            $("#sometimesShow").slideDown("fast");
            $(this).text("Less...");
        }, function () {
            $("#sometimesShow").slideUp("fast");
            $(this).text("More...");                
        });
    });
</script>
Jason
These are all great but it would be even better if it could be acomplished using one div without seperating the content, ill see what any one else comes up with , so thanks for your time and effort.
A: 

Heres a great way to achieve what i was wanting to achive. By displaying a certain amount of text at the top in one div and being able to show and hide the other half of the text with a slide effect.

http://sim.plified.com/2008/09/15/sliding-content-from-a-partial-height-with-jquery/