How to expand/collapse (toggle) div layer using jQuery

Step 1 Include jQuery Library in head section of your html file.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Step 2 Write HTML

<div class="main">
<p class="User">User-1</p>
<div class="description">PHP dev</div>
<p class="User">User-2</p>
<div class="description">Jquery dev</div>
</div>

Step 3 Write CSS
.main {
margin: 0;
padding: 0;
width: 500px;
}

.User {
margin: 1px;
color: #fff;
padding: 3px 10px;
cursor: pointer;
position: relative;
background-color:#c30;
}
.description {
padding: 5px 10px;
background-color:#fafafa;
}
p { padding: 5px 0; }
Step 4 JQuery function
<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery(".description").hide();
   jQuery(".User").click(function()
  {
    jQuery(this).next(".description").slideToggle(500);
  });
});
</script>

Thats it!!!!!!!!!!!!! Expandable-Collapsible panel is ready thank you
// 
Advertisements

JQuery add / remove Text-Box example Dynamically

Following are steps to create a dynamic input fields

1.HTML Code

$(document).ready(function(){
var increment=2;
$(“#addButton”).click(function(){
if(increment &gt; 5)
{
alert(increment);
return false;
}
// two methods
// first memthod…we can write div element
var maincontent=”Textbox #”+increment+” :
“;
var fun=”<div id=’TextBoxDiv”+increment+”‘>”+maincontent+”</div>”;
//$(“#TextBoxesGroup”).append(fun);
//second method
// here jquery through create div element
var newTextBoxDiv = $(document.createElement(‘div’)).attr(‘id’, ‘TextBoxDiv’ +increment);
newTextBoxDiv.after(”).html(maincontent);
$(newTextBoxDiv).appendTo(“#TextBoxesGroup”);
increment++;
});
$(“#removeButton”).click(function () {
if(increment==1){
alert(“No more textbox to remove”);
return false;
}
increment–;
$(“#TextBoxDiv” + increment).remove();
});

$(“#getButtonValue”).click(function () {
var msg = ”;
for(i=1; i&lt;increment; i++){
msg += &quot;\n Textbox #&quot; + i + &quot; : &quot; + $(‘#textbox’ + i).val();
}
alert(msg);
});
});

<div id=’TextBoxesGroup’>
<div id=”TextBoxDiv1″>
Textbox #1 :
</div>
</div>

that`s it.... 

Show next input after typing in the first input using JQuery

Look @ following code 

1.HTML Code

Fname:<input type="text" id="1" /><br>
Mname:<input type="text" id="2" /><br>
Lname:<input type="text" id="3" /><br>
Education:<input type="text" id="4" /><br>
Age:<input type="text" id="5" /><br>
Hobby:<input type="text" id="6" /><br>
PutLast:<input type="text" id="7" /><br>

2. Javascript 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
               $('#2, #3, #4, #5 , #6, #7').hide();
                 $("input").keyup(function () {
                       var value = $(this).val();
                       var id = parseInt($(this).attr('id'));
                       var nextid = '#' + (id + 1);
                if (value != "")
                         $(nextid).show();
                else     $(nextid).hide();
               });
});
</script>

3.CSS
<style>
P { color: blue; margin : 8 px;}
.hide { display:none; }
</style>

that`s it.... from my side Thank you  

or got thr` dis URL http://jsfiddle.net/L7ebh/71/