Click here to Skip to main content
15,174,684 members
Please Sign up or sign in to vote.
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
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..

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,
   
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 src="jquery.collapser.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?
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.
   

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




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900