how to hide and show multiple div using jquery
-----------------------------------------------
simple fallow my 2 steps.
step 1 Scriptquery
------------------:
<div class="inner-spacer inner-content" role="content" style="height: 378px;">
<form class="orb-form" id="myform">
<fieldset>
<div class="smallleft" style="border: 1px solid lightblue; width: 100%">
<table width="100%">
<tr>
<td style="width: 25%; vertical-align: top;">
<div class="small">
<div class="smallleft">
<h6>
<b>Stock Related</b>
</h6>
<div>
</div>
</div>
</div>
</td>
<td style="width: 75%;">
<div id="btnfirsthideDiv1">
<table style="width: 100%;">
<tr>
<td style="width: 30%;">
AllowNegativeStock
</td>
<td style="width: 70%;">
<section class="col col-6">
<label class="select">
<select name="AllowNegativeStock" style="width: 200px;" id="ddlAllowNegativeStock">
<option value="N">NO</option>
<option value="Y">YES</option>
</select>
</label>
</section>
</td>
</tr>
<tr>
<td>
DefCurrency
</td>
<td>
<section class="col col-6">
<label class="select">
<select name="DefCurrency" style=" width:200px;" id="ddlDefCurrency">
</select>
</label>
</section>
</td>
</tr>
<tr>
<td>
DefCurrencyDec
</td>
<td>
<section class="col col-6">
<label class="input">
<input id="txtDefCurrencyDec" style=" width:200px;" />
</label>
</section>
</td>
</tr>
</table>
</div>
</td>
<td style="vertical-align: top;">
<button class="btn btn-primary btnGlobalHideShow" onclick="divGlobalHideShow(1,1)"
type="button" id="btnhide1" title="Hide/Show">
<i class="fa fa-plus-square-o"></i> Hide</button>
</td>
</tr>
</table>
</div>
</fieldset>
<div style="clear: both">
</div>
<fieldset>
<div class="smallleft" style="border: 1px solid lightblue; width: 100%">
<table width="100%">
<tr>
<td style="width: 25%; vertical-align: top;">
<div class="small">
<div class="smallleft">
<h6>
<b>Item Related</b>
</h6>
<div>
</div>
</div>
</div>
</td>
<td style="width: 75%;">
<div id="btnfirsthideDiv2">
<table style="width: 100%;">
<tr>
<td style="width: 30%;">
Item PurRate
</td>
<td style="width: 70%;">
<section class="col col-6">
<label class="select">
<select name="ItemPurRate" id="ddlItemPurRate" style="width: 200px;">
</select>
</label>
</section>
</td>
</tr>
<tr>
<td>
ItemSalesRate
</td>
<td>
<section class="col col-6">
<label class="select">
<select name="ItemSalesRate" id="ddlItemSalesRate" style="width: 200px;">
</select>
</label>
</section>
</td>
</tr>
<tr>
<td>
Vsf Item Code Cols
</td>
<td>
<section class="col col-6">
<label class="select">
<input id="txtVsfItemCodeCols" style=" width:200px;" />
</label>
</section>
</td>
</tr>
</table>
</div>
</td>
<td style="vertical-align: top;">
<button class="btn btn-primary btnGlobalHideShow" onclick="divGlobalHideShow(1,2)"
type="button" id="btnhide2" title="Hide/Show">
<i class="fa fa-plus-square-o"></i> Hide</button>
</td>
</tr>
</table>
</div>
</fieldset>
<div style="clear: both">
</div>
<fieldset>
<div class="smallleft" style="border: 1px solid lightblue; width: 100%">
<table width="100%">
<tr>
<td style="width: 25%; vertical-align: top;">
<div class="small">
<div class="smallleft">
<h6>
<b>Email Related</b>
</h6>
<div>
</div>
</div>
</div>
</td>
<td style="width: 75%;">
<div id="btnfirsthideDiv3">
<table style="width: 100%;">
<tr>
<td style="width: 30%;">
From MailID
</td>
<td style="width: 70%;">
<section class="col col-6">
<label class="select">
<input id="txtFromMailID" style=" width:200px;" />
</label>
</section>
</td>
</tr>
<tr>
<td>
SMTP Password
</td>
<td>
<section class="col col-6">
<label class="select">
<input id="txtsmptpPwd" style=" width:200px;" />
</label>
</section>
</td>
</tr>
<tr>
<td>
Password Lap Days
</td>
<td>
<section class="col col-6">
<label class="select">
<input id="txtPwdLapDays" style=" width:200px;" />
</label>
</section>
</td>
</tr>
</table>
</div>
</td>
<td style="vertical-align: top;">
<button class="btn btn-primary btnGlobalHideShow" onclick="divGlobalHideShow(1,3)"
type="button" id="btnhide3" title="Hide/Show">
<i class="fa fa-plus-square-o"></i> Hide</button>
</td>
</tr>
</table>
</div>
</fieldset>
<div style="clear: both">
</div>
<fieldset>
<div class="smallleft" style="border: 1px solid lightblue; width: 100%">
<table width="100%">
<tr>
<td style="width: 25%; vertical-align: top;">
<div class="small">
<div class="smallleft">
<h6>
<b>Other Details</b>
</h6>
<div>
</div>
</div>
</div>
</td>
<td style="width: 75%;">
<div id="btnfirsthideDiv4">
<table style="width: 100%;">
<tr>
<td style="width: 30%;">
Auto Saving in seconds
</td>
<td style="width: 70%;">
<section class="col col-6">
<label class="select">
<input id="txtAutoSaving" style=" width:200px;" />
</label>
</section>
</td>
</tr>
<tr>
<td>
ValMethod
</td>
<td>
<section class="col col-6">
<label class="select">
<select name="ItemSalesRate" id="ddlValMethod" style="width: 200px;">
<option value="N">--Select--</option>
<option value="Std. Rate">Std. Rate</option>
<option value="Weighted Avg.">Weighted Avg.</option>
<option value="FIFO">FIFO</option>
</select>
</label>
</section>
</td>
</tr>
<tr>
<td style="vertical-align: top;">
Marquee Message
</td>
<td>
<section class="col col-6">
<label class="select">
<textarea id="txtMarqueeMsg" placeholder="Marquee Message" name="Marquee Message" rows="2" style="width:250px; resize: none;"></textarea>
</label>
</section>
</td>
</tr>
</table>
</div>
</td>
<td style="vertical-align: top;">
<button class="btn btn-primary btnGlobalHideShow" onclick="divGlobalHideShow(1,4)"
type="button" id="btnhide4" title="Hide/Show">
<i class="fa fa-plus-square-o"></i> Hide</button>
</td>
</tr>
</table>
</div>
</fieldset>
<div style="clear: both">
</div>
</form>
</div>
step 2 Scriptquery
------------------:
function divGlobalHideShow(type, btnid) {
if (type == 1) {
$('#btnhide' + btnid).attr('onclick', 'divGlobalHideShow(0,' + btnid + ')');
$('#btnhide' + btnid).html('<i class="fa fa-plus-square-o"></i> Show');
$("#btnfirsthideDiv" + btnid).hide();
} else {
$('#btnhide' + btnid).attr('onclick', 'divGlobalHideShow(1,' + btnid + ')');
$('#btnhide' + btnid).html('<i class="fa fa-plus-square-o"></i> hide');
$("#btnfirsthideDiv" + btnid).show();
}
}
but you have write in the script tag if you are writing jquery in html or other wise you can write in your own js file
if you have any querys please visit Scriptquery blogger to http://scriptquery.blogspot.in/
here lot of examples are there which is use full in real time applications. please share to you friends
9:48 PM
Share:
