We Keep Coding

Call Action method from jquery popup modal

OK I have made many searches before posting this but I couldn't really get what I needed, the thing is I have a popup modal for login/register
<!--Signin/Signup container-->
<div id="modal" class="popupContainer" style="display:none;">
<section class="popupBody">
<!-- Social Login -->
<div class="social_login">
<div class="">
<a href="#" class="social_box fb">
<span class="icon"><i class="fa fa-facebook"></i></span>
<span class="icon_title">سجل عن طريق الفيس بوك</span>
</a>
<a href="#" class="social_box google">
<span class="icon"><i class="fa fa-google-plus"></i></span>
<span class="icon_title">سجل عن طريق كوكل</span>
</a>
</div>
<div class="centeredText">
<span>أو استخدم الايميل الخاص بك</span>
</div>
<div class="action_btns">
<div class="one_half">Login</div>
<div class="one_half last"> Register</div>
</div>
</div>
<!-- Username & Password Login form -->
<div class="user_login">
<form>
<label>الايميل / اسم المستخدم</label>
<input type="text" />
<br />
<label>كلمة السر</label>
<input type="password" />
<br />
<div class="checkbox">
<input id="remember" type="checkbox" />
<label for="remember">احفظ معلومات الدخول على هذا الجهاز</label>
</div>
<div class="action_btns">
<div class="one_half"><i class="fa fa-angle-double-left"></i> رجوع</div>
<div class="one_half last">Login</div>
</div>
</form>
هل نسيت كلمة المرور؟
</div>
<!-- Register Form -->
<div class="user_register">
<form>
<label>الاسم الكامل</label>
<input type="text" />
<br />
<label>عنوان البريد الألكتروني</label>
<input type="email" />
<br />
<label>كلمة المرور</label>
<input type="password" />
<br />
<div class="checkbox">
<input id="send_updates" type="checkbox" />
<label for="send_updates">أرسل لي رسائل في حال وجود أي تحديثات</label>
</div>
<div class="action_btns">
<div class="one_half"><i class="fa fa-angle-double-left"></i> Back</div>
<div class="one_half last">Register</div>
</div>
</form>
</div>
</section>
</div>
<!--Signin/Signup End-->
and this is the script:
<script>
// Plugin options and our code
$("#modal_trigger").leanModal({
top: 100,
overlay: 0.6,
closeButton: ".modal_close"
});
$(function () {
// Calling Login Form
$("#login_form").click(function () {
$(".social_login").hide();
$(".user_login").show();
return false;
});
// Calling Register Form
$("#register_form").click(function () {
$(".social_login").hide();
$(".user_register").show();
$(".header_title").text('Register');
return false;
});
// Going back to Social Forms
$(".back_btn").click(function () {
$(".user_login").hide();
$(".user_register").hide();
$(".social_login").show();
$(".header_title").text('Login');
return false;
});
});
/*--------------------------------*/
</script>
</div>
Now what I need is to create an action method so when the user click Register or Login it get called to do what necessary
How can I do that. my knowledge in jquery and javascript is kind of limited
I will appreciate any help.
thank you in advance

Attach ids to your buttons:
<div id = "login_button" class="one_half last">Login</div>
Then attach an event listener to them:
$("#login_button").click(function() {
// Do something
});
Same for the Register button.

jQuery - Function to display next element on page and hide the current one on click

I've been trying to create a function that will allow, once a radio button is checked, to check if the ID is correct and then display a subsequent button in the another div (not the very next one).
Once the subsequent button is clicked, it will hide the previous div and display the rest of the content for the current one.
I was trying to create a script that would do this for however many containers I wanted. So you could essentially traverse down the page showing and hiding elements with a click and check based on answer.
I can't figure out how to make this happen after the first instance however. Any help would be much appreciated. Here's my code:
$(document).ready(function () {
$(this).find(".check-answer-button").click(function () {
if ($("#correct-answer").is(":checked")) {
if ($(".wrong-answer").is(":visible")) {
$(".wrong-answer").hide();
}
$(".right-answer").show();
$(".next-question-div:first").show();
$(".next-question-button").click(function () {
$(".question-radio-button-div:first").show(500);
$(".answer-div:first").show(500);
$(".question-div:nth-child(1)").hide();
$(".next-question-button").hide();
if ($("h4").is(":visible")) {
$("h4").hide();
}
});
}
else {
$(".wrong-answer").show();
}
});
});
.right-answer,
.wrong-answer {
display: none;
}
.next-question-div {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- QUESTION 1 -->
<div class="question-div" id="question-one">
<div class="row">
<div class="col-12">
<p>Q1</p>
<ul>
<li>
<input type="radio" name="radio" value="value1" id="correct-answer">A
</li>
<li>
<input type="radio" name="radio" value="value1">B
</li>
<li>
<input type="radio" name="radio" value="value1">C
</li>
</ul>
</div>
</div>
<div class="row" id="answer-one-div">
<div class="col-12">
<button type="button" class="check-answer-button">Check Answer</button>
<h4 class="right-answer">Well done this is correct</h4>
<h4 class="wrong-answer">Sorry, try again</h4> </div>
</div>
</div>
<!-- QUESTION 2 -->
<div class="question-div" id="question-two">
<div class="next-question-div">
<button type="button" class="next-question-button">Next Question</button>
</div>
<div class="row question-radio-button-div">
<div class="col-12">
<p>Q2</p>
<ul>
<li>
<input type="radio" name="radio" value="value1">A
</li>
<li>
<input type="radio" name="radio" value="value1">B
</li>
<li>
<input type="radio" name="radio" value="value1" id="correct-answer">C
</li>
</ul>
</div>
</div>
<div class="row answer-div" id="answer-two-div">
<div class="col-12">
<button type="button" class="check-answer-button">Check Answer</button>
<h4 class="right-answer">Well done this is correct</h4>
<h4 class="wrong-answer">Sorry, try again</h4> </div>
</div>
</div>
What's the best way to approach this? Thanks

I suggest you to correct your question-div. This must be a template valid for all questions but each with different question/answer.
Avoid to use duplicated ID and consider the next button is part of every question. Only the last question has no more next question.
Consider to use attribute like answer="true" instead to use ID.
Try to avoid to mix HTML and bootstrap.
A simple demo of what you are looking for could be:
$(document).ready(function (e) {
$(".next-question-button").on('click', function (e) {
var cachedDiv = $(this).closest('.question-div');
cachedDiv.fadeOut(500, function () {
cachedDiv.nextAll('.question-div:first').fadeIn(500);
});
});
$(".check-answer-button").on('click', function (e) {
var cachedDiv = $(this).closest('.question-div');
if (cachedDiv.find(':radio:checked').attr('answer') == 'true') {
$(this).nextAll(".wrong-answer").hide();
$(this).nextAll(".right-answer").show();
cachedDiv.find('.next-question-div').show();
}
else {
$(this).nextAll(".wrong-answer").show();
}
});
$(".question-div:gt(0)").hide();
});
.right-answer,
.wrong-answer {
display: none;
}
.next-question-div {
display: none;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<!-- QUESTION 1 -->
<div class="question-div">
<div class="row">
<div class="col-12">
<p>Q1</p>
<ul>
<li>
<input type="radio" name="radio" value="value1" answer="true">A
</li>
<li>
<input type="radio" name="radio" value="value1">B
</li>
<li>
<input type="radio" name="radio" value="value1">C
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-12">
<button type="button" class="check-answer-button">Check Answer</button>
<h4 class="right-answer">Well done this is correct</h4>
<h4 class="wrong-answer">Sorry, try again</h4></div>
</div>
<div class="next-question-div">
<button type="button" class="next-question-button">Next Question</button>
</div>
</div>
<!-- QUESTION 2 -->
<div class="question-div">
<div class="row">
<div class="col-12">
<p>Q2</p>
<ul>
<li>
<input type="radio" name="radio" value="value1">A
</li>
<li>
<input type="radio" name="radio" value="value1" answer="true">B
</li>
<li>
<input type="radio" name="radio" value="value1">C
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-12">
<button type="button" class="check-answer-button">Check Answer</button>
<h4 class="right-answer">Well done this is correct</h4>
<h4 class="wrong-answer">Sorry, try again</h4></div>
</div>
<div class="next-question-div">
<button type="button" class="next-question-button">Next Question</button>
</div>
</div>
<!-- QUESTION 3 -->
<div class="question-div">
<div class="row">
<div class="col-12">
<p>Q3</p>
<ul>
<li>
<input type="radio" name="radio" value="value1">A
</li>
<li>
<input type="radio" name="radio" value="value1">B
</li>
<li>
<input type="radio" name="radio" value="value1" answer="true">C
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-12">
<button type="button" class="check-answer-button">Check Answer</button>
<h4 class="right-answer">Well done this is correct</h4>
<h4 class="wrong-answer">Sorry, try again</h4></div>
</div>
<div class="next-question-div">
<button type="button" class="next-question-button">See results</button>
</div>
</div>
<!-- QUESTION ENDED -->
<div class="question-div">
<div class="row">
<div class="col-12">
<p>FINISH</p>
</div>
</div>
</div>

How to add a "required" checkbox in this code

I want a checkbox in this code. Only if the checkbox is checked it should be possible to press upload / or to allow a upload.
Could you give me a hint how it's possible to change this?
Actually I can insert a checkbox but it's always uploading if the checkbox is unchecked.
#extends('master/index')
#section('custom')
<!-- Main page -->
<div id="content-wrapper" class="snap-content">
<!-- Progress bar -->
<div class="container progress-holder">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="progress-rate">--%</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">--% Complete</span>
</div>
</div>
</div>
</div>
</div>
<!-- Drag zone -->
#if($limitReached == true)
<div class="container text-center start-zone">
<p>{{ t('You have reached daily upload limit') }}</p>
</div>
#else
<div class="container text-center start-zone">
<form id="fileupload" action="{{ route('images.upload') }}" method="POST" enctype="multipart/form-data" accept="image/gif, image/jpeg, image/jpg, image/png">
<input type="file" id="input-browse" class="block-hide" multiple="multiple" name="files">
<p>{{ t('Drag photos from your computer in here. Select maximum 10 images') }}</p>
<div class="help-block">{{ t('Maximum file size allowed is') }} {{ maxUploadSize()*1024 < (int)siteSettings('maxImageSize')*(1024) ? maxUploadSize() : (int)siteSettings('maxImageSize') }}MB (o.O)</div>
<p>{{ t('You can also') }} <a class="browse_files" href="#">{{ t('browse') }}</a> {{ t('for photos to upload') }}.</p>
</form>
</div>
#endif
<div class="uploader block-hide">
<!-- Preview zone -->
<div class="container preview-zone">
<img src="{{ asset('static/img/mask-tran.png') }}"/>
</div>
<!-- Thumbnail zone -->
<div class="container thumbnail-zone">
<div class="row">
<div class="col-md-9">
<ul class="thumbnails-holder nav nav-tabs" id="myTab"></ul>
</div>
<div class="actions col-md-3 text-right">
<button type="button" class="btn btn-danger btn-remove"><i class="glyphicon glyphicon-trash"></i> remove</button>
<button type="button" class="btn btn-primary btn-upload"><i class="glyphicon glyphicon-open"></i> upload</button>
<p class="help-block"><span class="readyphoto"></span>/<span class="totalphoto"></span> photos are ready</p>
</div>
</div>
</div>
<!-- Edit zone -->
<div class="container-fluid tab-content edit-zone-holder"></div>
</div>
</div>

You can do this with JavaScript using the onchangeevent event to enable/disable button based on checked value
<input type="checkbox" onchange="document.getElementById('uploadButton').disabled = !this.checked;" />
<input type="submit" id="uploadButton" value=" Upload " />

you can disable and enable buttons with jQuery depending on the checkbox selection.
If you have:
<input type="checkbox" id="checkbox"/>
<button id="upload">Upload</button>
Then in your jQuery:
$("#upload").prop('disabled', true);
$("#checkbox").bind('change', function(){
var checked = this.checked;
if(checked){
$("#upload").prop('disabled', false);
} else {
$("#upload").prop('disabled', true);
}
});
JSFiddle

add a checkbox
<input type="checkbox" name="chk" id="chk" value="yourvalue">
add onclick event in your upload button
<button type="button" onclick="selected()">upload</button>
<script>
function selected()
{
if(document.getElementById('chk').checked) {
document.getElementById("fileupload").submit();
} else {
alert('YOUR CUSTOM MESSAGE');
}
}
</script>

Try this:
Add this in your html form.
<input type="checkbox" name="writeSomeName" value="value">
Then after that write some php code:
if ($_POST['writeSomeName'] == 'value')
{
//Add code for upload file here
}
else
{
echo "You have not checked the checkbox. Please make it check first"
}

Modal popup open while calling a function

I am using the below code to show the login modal popup. Its working well. But i need another one function to show the model popup without button click. If i call that function means the same popup should be appear. Please help me to do this.
<a id="modal_trigger" tabindex="-1" href="#modal" class="btn">Login </a>
<script type="text/javascript">
$("#modal_trigger").leanModal({ top: 200, overlay: 0.6, closeButton: ".modal_close" });
$(function () {
// Calling Login Form
//$("#login_form").click(function () {
//$(".user_login").show();
//return false;
//});
})
</script>
<div id="modal" class="popupContainer" style="display: none;">
<header class="popupHeader">
<span class="header_title"><i class="fa fa-user"> Login</i></span>
<span class="modal_close"><i class="fa fa-times"></i></span>
</header>
<section class="popupBody">
<!-- Social Login -->
<div class="user_login">
<form>
<label>Username</label>
<input type="text" />
<br />
<label>Password</label>
<input type="password" />
<br />
<div class="checkbox">
<input id="remember" type="checkbox" />
<label for="remember">Remember me on this computer</label>
</div>
<div class="action_btns">
<div class="one_half"><i class="fa fa-angle-double-left"></i> Back</div>
<div class="one_half last">Login</div>
</div>
</form>
Forgot password?
</div>
</section>
</div>

try this it will show the popup
$('#login_form').trigger('click');

bootstrap accordion not working properly

i am trying to develop bootstrap accordion and it works fine in jsfiddle
But when i tried in my web app its not working.I have attached the screenshot how it looks.As you can see in the screenshot there are no errors in the console.i am including following in my jsp page
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet">
<script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen"
href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
Even I had replaced <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> in place of <script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script> but no luck.Please tell me what else do i need?
Following is the full code
<%# page import="java.sql.*" %>
<%# page import="DB.*" %>
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>send sms</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet">
<script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen"
href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
</head>
<body>
<div class="tabbable" id="myTabs">
<ul class="nav nav-tabs">
<li class="active">Send Message</li>
<li>Users</li>
<li>Group Message</li>
<li>Sign Out</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<div class="btn-group-vertical pull-right" data-toggle="buttons-radio">
<%
DataBaseConnection db=new DataBaseConnection();
Connection con=db.connet();
PreparedStatement pt=con.prepareStatement("select * from registerSmsUsers");
ResultSet rs=pt.executeQuery();int i=1;
while(rs.next())
{%>
<button type="button" class="btn btn-primary btn-block" id="<%=rs.getString("mobile")%>"><%=rs.getString("name")%></button>
<%i++;}
%></div>
<div class="container">
<div class="row">
<div class="span12">
<h3>Send SMS to Individual number</h3>
<form class="form-signin" action="#" method="post" onsubmit="return false;">
<div class="row">
<div class="span3">
Enter Number to send:
</div>
<div class="span3">
<!-- <input type="text" name="toNumber" id="number" maxlength="13" placeholder="Enter 10 digits number to send" value="+22" rel="popover"/> -->
<!--<input type="text" name="toNumber" id="number" maxlength="13" placeholder="Enter 10 digits number to send" value="+2222" rel="popover" data-trigger="hover" data-delay='{"show":"10", "hide":"3000"}'/>-->
<input type="text" name="toNumber" id="number" maxlength="13" placeholder="Enter 10 digits number to send" value="+2222" rel="popover" data-trigger="hover" />
</div>
<!--<div class="span6">
<div class="alert">
<button type="button" class="close" data-dismiss="alert">×</button>
Please enter 10 digit mobile number prefixed by country code eg +911234567890<hr />
</div>
</div>-->
</div>
<div class="row">
<div class="span3">
Enter Message to send:
</div>
<div class="span3"> <div id="datetimepicker" class="input-append date">
<input style="display:none" type="text" name="body" maxlength="160" placeholder="Enter message to send" class=".dtext" id="body" data-trigger="hover"/>
<input type="text" id="txt" style="display:none"/>
<textarea rows="9" cols="50" class="darea1" id="darea"></textarea><span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
</div>
<!--<div class="span6">
<div class="alert">
<button type="button" class="close" data-dismiss="alert">×</button>
The text of the message you want to send, limited to 160 characters.
</div>
</div>-->
</div>
<div class="row">
<div class="span3">
</div>
<div class="span9">
<button class="btn" type="submit" id="openAlert" >Send</button>
</div>
</div>
</form>
</div>
</div>
<div id="le-alert" class="alert alert-warn alert-block fade">
<button href="#" type="button" class="close">×</button>
<h4>Successful</h4>
<p>Message sent successfully</p>
</div>
</div>
</div>
<!-- 2nd tab strats -->
<div class="tab-pane" id="tab2">
<form class="well span9" action="insertNew" method="post">
<div class="row">
<div class="span3">
<label>Name</label>
<input type="text" id="fields" class="span4" placeholder="Your full Name" name="username" required>
</div>
<div class="span3">
<label>Email Address</label>
<input type="email" id="fields1" class="span4" placeholder="Your email address" name="email" required>
</div>
<div class="span3">
<label>Mobile</label>
<input type="tel" id="fields2" class="span4" placeholder="+756762462182" name="mobile" maxLength="13" required >
</div>
</div>
<input type="button" id="btn1" class="btn btn-lg btn-primary" value="Add">
</form>
<input type="button" id="btn2" class="btn btn-lg btn-primary" value="Group">
<!-- accordion strats-->
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
records
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
<table border="1" id="mytable" class="table"/>
<tr>
<th>Add</th>
<th>Username</th>
<th>EmailId</th>
<th>Mobile No</th>
</tr>
</table> </div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
groups here </div>
</div>
</div>
</div>
<!-- accordion ends-->
<!--<table border="1" id="mytable" class="table"/>
<tr>
<th>Add</th>
<th>Username</th>
<th>EmailId</th>
<th>Mobile No</th>
</tr>
</table>-->
</div>
<!-- 2nd tab ends -->
<div class="tab-pane" id="tab3">
<p>para in section 3</p>
</div>
</div>
</div>
<script>
$(function() {
$("#datetimepicker").datetimepicker({
format: "'dd/MM/yyyy hh:mm:ss'",
linkField: "#txt",
linkFormat: "yyyy-mm-dd hh:ii",
autoclose: true,
});
jQuery('#datetimepicker').datetimepicker().on('changeDate', function(ev){
$(".darea1").val($( ".darea1" ).val()+$( "#txt" ).val());
});
});
</script>
<script>
$('#tabAll').click(function(){
$('#tabAll').addClass('active');
$('.tab-pane').each(function(i,t){
$('#myTabs li').removeClass('active');
$(this).addClass('active');
});
});
$('body').on('click', '.btn', function(){
if(this.id=='openAlert')
{$('#number').val('');}else{$('#number').val(this.id);}
});
</script>
<script >
$(document).ready(function(){
$("#signout").click(function() {
window.location.replace("logout.jsp");
});
//next line
var val=0;
$(document).ready(function(){
$('#btn1').click(function(){
if($(".span4").val()!="")
{
$("#mytable").append('<tr id="mytr'+val+'"></tr>');
$("#mytr"+val).append('<td class=\"cb\"><input type=\"checkbox\" value=\"yes\" name="mytr'+val+'" checked ></td>');
$(".span4").each(function () {
$("#mytr"+val).append("<td >"+$(this).val()+"</td>");
});
val++;
}
else
{
alert("please fill the form completely");
}
});
$('#btn2').click(function(){
var creat_group=confirm("Do you want to creat a group??");
if(val>1){
alert(creat_group);
}
});
});
//
$('#openAlert').click(function(){
var number = $('#number').val(); // If its a text input could use .text()
var msg = $('#darea').val(); //If its a text input could use .text()
alert(msg);
$.ajax(
{
type: "POST",
url: "messageSending.jsp", //Your full URL goes here
data: { toNumber: number, body: msg},
success: function(data, textStatus, jqXHR){
alert(data);
},
error: function(jqXHR){
alert(jqXHR.responseStatus);
}
});
});
});
</script>
<script>
$(function ()
{ $("#number").popover({title: 'Enter Mobile Number',content: "Please enter 10 digit mobile number prefixed by country code eg +911234567890"});
});
$(function ()
{ $("#body").popover({title: 'Message Body',content: "Maximum 160 characters allowed"});
});
</script>
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript"
src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
</script>
</body>
</html>

Head
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript">
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js" type="text/javascript">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" type="text/css" rel="stylesheet">
HTML
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
</div>
Fiddle: http://jsfiddle.net/fzN4K/15/
Jquery 1.9.1 : http://jsfiddle.net/fzN4K/16/