Unable to add some animation or slide up

Question

1.00/5 (1 vote)

See more:

Hi i want to add some animation or some slide up or slide in my code while clicking on the label.can you please help me.
I will share my running code.

XML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>

<head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=no,target-densitydpi=device-dpi" />
    <!--title>Expand table rows with jQuery - jExpand plugin - JankoAtWarpSpeed demos</title-->

 <!--script src="jquery.collapser.min.js" type="text/javascript"></script-->


    <style type="text/css">
      .hidden {
 visibility: hidden
}
    </style>
   <script src="jquery.min.js" type="text/javascript"></script>
 <!--script src="jquery.collapser.js" type="text/javascript"></script-->
    <script type="text/javascript">


    /*$('.label').onClick( make_visible );

make_visible () {
  var id = this.id;
  id += '_desc';
 $('.description').addClass('hidden'); //makes everything hidden again
 $('#'+id).removeClass('hidden'); //nunhides the selected label description.
};*/

$(document).ready(function () {
         $(".label").click(function () {

             var id = this.id;
            //  $('.' + id).slideUp();
             id += '_desc';
$('.description').addClass('hidden'); //makes everything hidden again
             $('#' + id).removeClass('hidden'); //nunhides the selected label description.
         });

     });


    </script>
</head>
<body>

<div id='label_xx1' class='label'> Label 1</div><div id='label_xx1_desc' class='description hidden'>Description 1</div>
<div id='label_xx2' class='label'>Label 2</div><div id='label_xx2_desc' class='description hidden'>Description 2</div>
<div id='label_xx3' class='label'>Label 3</div><div id='label_xx3_desc' class='description hidden'>Description 3</div>
<div id='label_xx4' class='label'>Label 4</div><div id='label_xx4_desc' class='description hidden'>Description 4</div>


</body>
</html>

thanks

Posted 15-Sep-12 18:55pm

ravinsit89

Add a Solution

Comments

ravinsit89 16-Sep-12 0:57am

not able to remove some space between the labels

Sandeep Mewara 16-Sep-12 1:16am

Not clear. Please elaborate.
Use the "Improve question" link to edit your question and provide better information.

ravinsit89 16-Sep-12 1:22am

actually in my application if i click to label then it show its description.
if i click another label it close the description of previous label and open the description of latest label, i used hidden functionality, want some slideup , slidedown (some animation)while closing or opening the description

i also want to remove some space between label..

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

**AmitGajjar** · Answer 1 · 2012-09-15T20:01:00

Solution 1

Hi,

What i understand is, you need some sliding text using jQuery,

Here i found one link that do the similar task: jQuery Label Sliding[^]

Hope it works for you,

Posted 15-Sep-12 20:01pm

AmitGajjar

Comments

ravinsit89 16-Sep-12 2:12am

no sir it is not working..:(

AmitGajjar 16-Sep-12 2:15am

So what is the issue ? is there any error ?

ravinsit89 16-Sep-12 4:02am

no sir ..!! i want to make this like demo 6 in

http://www.aakashweb.com/resources/pages/demos/jquery-collapser/

so i want to do some changes .i don't know how to do that..

AmitGajjar 16-Sep-12 8:31am

Ok this is called Accordion panel. Just go through http://jqueryui.com/demos/accordion/

Read it once and implement as it shows you,

ravinsit89 16-Sep-12 9:00am

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>

<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=no,target-densitydpi=device-dpi" />

<script src="jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

jQuery(document).ready(function(){
$('.accordion.head').click(function() {
$(this).next().toggle('slow');
return false;
}).next().hide();
});

</script>
</head>
<body>

<div id="accordion">

First header

<div>First content</div>

Second header

<div>Second content</div>
</div>

</body>
</html>

ravinsit89 16-Sep-12 9:00am

i used this code but not able to do that

Bryian Tan 16-Sep-12 17:02pm

What is "that"? Can you post the updated code again?

Bryian Tan · Answer 2 · 2012-09-16T11:29:00

ok, let improve your code from previous post to achieve the animation effects.

Help me to remove this syntax error[^]

Update the style to:

XML

<style type="text/css">
      .hidden {display:none;}

Then the JavaScript part to:

XML

<script type="text/javascript">
         $(document).ready(function () {
             $(".label").click(function () {
                 var id = this.id;
                 id += '_desc';
                 $('.description').hide();//.addClass('hidden'); //makes everything hidden again
                 $('#' + id).slideToggle(); //.removeClass('hidden'); //nunhides the selected label description.
             });

         });
    </script>

The css change will remove the spaces between the label, the JavaScript change will add the slide animation.