Tag Archives: Javascript

Create a Simple Accordion with jQuery and CSS

As per the project I have to build a simple accordion and would like to share with you. So here I’m explaining how to build an accordion with jQuery and css. A plus and minus and a small gray gradient images are used in accordion. You can download and use for personal or commercial works but forbidden to redistribute other than bijusubhash.com. If you like this then please spread or back link from your website.The steps are explaining below. You can see a demo and download too.
Simple Accordion Example

Step 1: The jQuery Code

<script type="text/javascript" src="../js/jquery.js" ></script>
<script  type="text/javascript" language="javascript">
$(document).ready(function(){
$('.adCntnr div.acco2:eq(0)').find('div.expand:eq(0)').addClass('openAd').end() /*find the first child and opended by default, and add class openAd*/
.find('div.collapse:gt(0)').hide().end()
.find('div.expand').click(function() {
$(this).toggleClass('openAd').siblings().removeClass('openAd').end()
.next('div.collapse').slideToggle().siblings('div.collapse:visible').slideUp();
return false;
});
})
</script>

Step 2 : CSS Markup


/* Accordion Styles starts */
.adqstdts {
min-height:75px;
background:#f0f0f1;
border:1px solid #dbdbdc;
border-left:none;
border-right:none;
margin-top:7px;
padding:7px;
}
.asdDts {
color:#737374;
font-size:12px;
font-weight:normal;
line-height:25px;
}
.printAd {
background:url(../images/printer.png) no-repeat ;
padding-left:25px;
padding-bottom:2px;
padding-top:2px;
color:#737374;
}
.exportAd {
background:url(../images/document-export.png) no-repeat ;
padding-bottom:2px;
padding-left:25px;
padding-top:2px;
color:#737374;
}
.adCntnr .acco2 .expand {
background:url(../images/title_bar_bg.gif) repeat-x ;
line-height:28px;
border-left:1px solid #cfcece;
border-right:1px solid #cfcece;
padding-left:5px;
}
.adCntnr .acco2 .expand a{
background:url(../images/rnd_plus_icon.png) no-repeat 0 4px;
padding-left:25px;
text-decoration:none;
}
.adCntnr .acco2 .openAd a{
background:url(../images/rnd_minus_icon.png) no-repeat 0 4px ;
padding-left:25px;
color:#333 !important;
text-decoration:none;
}

.adCntnr .acco2 .openAd {
background:url(../images/title_bar_bg.gif) repeat-x ;
line-height:27px;
border-left:1px solid #cfcece;
border-right:1px solid #cfcece;
padding-left:5px;
}

.adCntnr .acco2 .expand a{
color:#676f72;
}

.adCntnr  .accCntnt {
border:1px solid #cfcece;
border-top:none;
padding:10px;
background:#f1f1f1;
}
/* Accordion Styles starts */

Step 3 : HTML Markup

<div class="adCntnr" >
<div class="acco2">
<div class="expand"><a title="expand/collapse" href="#" style="display: block;">Title for the First Heading</a></div>
<div class="collapse">
<div class="accCntnt">
<div class="titlebarLeftc" style="height:25px; border-bottom:1px solid #dadada;">
<div class="titlebarRightc" style="height:25px;">
<div class="titlebar" style="height:25px;">
<table class="dataGridHdr" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="dataGridHdr_boder" style="padding-left:0;";>Label One</td>
<td width="210" class="dataGridHdr_boder2">Label Two</td>
<td width="45" class="dataGridHdr_boder2">Label</td>
<td width="40" class="dataGridHdr_boder3">Label</td>
</tr>
</table>
</div>
</div>
</div>
<div class="dataGrid_container">
<table class="dataGrid" width="100%" cellpadding="0" cellspacing="0">
<tr class="dataAlterRw1">
<td class="dataGridHdr_boder">Lorem ipsum dolor sit amet, consectetur</td>
<td  width="210" class="dataGridHdr_boder" style="padding:0 7px;">Lorem ipsum</td>
<td  width="45" class="dataGridHdr_boder" style="padding:0 7px;">60%</td>
<td  width="47" class="dataGridHdr_boder3" style="padding:0 7px;">17</td>
</tr>
<tr class="dataAlterRw2">
<td class="dataGridHdr_boder">Lorem ipsum dolor sit amet</td>
<td  width="210" class="dataGridHdr_boder" style="padding:0 7px;">Lorem ipsum</td>
<td  width="45" class="dataGridHdr_boder" style="padding:0 7px;">10%</td>
<td  width="47" class="dataGridHdr_boder3" style="padding:0 7px;">17</td>
</tr>
<tr class="dataAlterRw1">
<td class="dataGridHdr_boder">Lorem ipsum dolor sit </td>
<td  width="210" class="dataGridHdr_boder" style="padding:0 7px;">Lorem ipsum</td>
<td  width="45" class="dataGridHdr_boder" style="padding:0 7px;">20%</td>
<td  width="47" class="dataGridHdr_boder3" style="padding:0 7px;">17</td>
</tr>
<tr class="dataAlterRw2">
<td class="dataGridHdr_boder" >Lorem ipsum dolor sit amet, consectetur</td>
<td  width="210" class="dataGridHdr_boder" style="padding:0 7px;">Lorem ipsum</td>
<td  width="45" class="dataGridHdr_boder" style="padding:0 7px;">30%</td>
<td  width="47" class="dataGridHdr_boder3" style="padding:0 7px;">17</td>
</tr>
</table>
</div>
</div>
</div>
<div style="height:5px;"></div>
<div class="expand"><a title="expand/collapse" href="#" style="display: block;">Title for the Second Heading</a></div>
<div class="collapse">
<div class="accCntnt">
<p style="font-weight:normal; color:#333;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<div style="height:5px;"></div>
<div class="expand"><a title="expand/collapse" href="#" style="display: block;">Title for the Third Heading</a></div>
<div class="collapse">
<div class="accCntnt">
<p style="font-weight:normal; color:#333;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<div style="height:5px;"></div>
<div class="expand"><a title="expand/collapse" href="#" style="display: block;">Back to Tutorial</a></div>
<div class="collapse">
<div class="accCntnt">
<p style="font-weight:normal; color:#333;">
<div style="text-align:center;"><a href="#">Back to the Tutorial</a></div>
</p>
</div>
</div>
</div>
</div>
Simple Accordion with jQuery (2744)
Share with Friends
[Facebook] [Jamespot] [Reddit] [StumbleUpon] [Twitter] [Email]

A Signature Pad for Your HTML Forms

A Signature Pad for Your HTML Forms

The Signature Pad jQuery plugin will transform an HTML form into a signature pad. The Signature Pad has two modes: TypeIt and DrawIt. In TypeIt mode the user’s signature is automatically generated as HTML text, styled with @font-face, from the input field where they type their name. In DrawIt mode the user is able to draw their signature on the canvas element.

The drawn signature is written out to a hidden input field as a JSON array using JSON.strinify(). Since the signature is saved as JSON it can be submitted as part of the form and kept on file. Using the JSON array, the signature can then be regenerated into the canvas element for display. Signature Pad works with both mouse and touch devices.

website url

Share with Friends
[Facebook] [Jamespot] [Reddit] [StumbleUpon] [Twitter] [Email]

jQuery E-Help Embedded Help System for Web Apps

jQuery E-Help Embedded Help System for Web Apps

Embedded Help System is “providing help where help is needed” concept that can be easily integrated into web interface. The point is to offer help to user in their working interface and actual situation.

Jquery E-Help is plugin for procedural(“How to …”) web user interface help and it’s easy to integrate into any web interface that supports Jquery. Useful for all web applications, CMS and E-commerce systems.

website url

Share with Friends
[Facebook] [Jamespot] [Reddit] [StumbleUpon] [Twitter] [Email]