Jquery slide up and down what should i do?

StackOverflow https://stackoverflow.com/questions/1239798

  •  11-09-2019
  •  | 
  •  

Question

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">
<html xmlns="http://www.w3.org/1999/xhtml">
<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

Was it helpful?

Solution 3

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/

OTHER TIPS

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.

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>

This is a simple code that would help ..

Just copy the code inside Script tag

 $(document).ready(function() {
            $('#buttontag').click(function(){
                //alert("Here I am ..");
                $('#mytext').slideToggle("fast");
            });
        });

Add this inside the body tag ..

<button id="buttontag"> Slide it .. </button>

This would definitely work .. but you have to include the jquery file ..

http://code.jquery.com/jquery-1.9.1.min.js

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top