How to clear list before loading-Bootstarp 4 - javascript

I created list group as following :
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>test</title>
<!--bootstrap scripts-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--end bootsripts-->
</head>
<body>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#s">Default</button>
<div class="modal" tabindex="-1" role="dialog" id="s">
<div class="modal-dialog modal-lg modal-dialog-scrollable" >
<div class="modal-content">
<div class="modal-body">
<div class="row">
<div class="col-6 col-sm-6 col-xl-6">
<h5 class="text-danger">Main Catagories</h5>
<div class="list-group"style="width:100px;border:none">
Vehical
Property
</div>
</div>
<div class="col-6">
<div class="list-group list-group-flush" style="width:100px;border:none" >
<div class="list-group collapsing" id="vehical" data-toggle="collapse" style="width:100px;border:none" >
Vehical1
Vehical2
Vehical3
Vehical4
Vehical5
</div>
<div class="list-group collapsing" id="property" data-toggle="collapse" style="width:100px;border:none">
Property1
Property2
Property3
Property4
Property5
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Java Scripts-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<!--end of java scripts-->
</body>
</html>
When click Main Category Sub category will display on next column.but it display as enter image description here
I need when I click new main category button ,It shows sub category in right pannel which is related to Main Category.How ever after that when click another main category button both sub categories shows in right panel but I want shows only subcategory items related to which is click main category.I use bootstrap 4 version

Answering late but I think it would be helpful for somebody else facing the same issue.
Actually you were missing some attributes needed to do the tabbing on the list-group. Check the below code snippet to get the idea.
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>test</title>
<!--bootstrap scripts-->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<!--end bootsripts-->
</head>
<body>
<button
type="button"
class="btn btn-default"
data-toggle="modal"
data-target="#s"
>
Default
</button>
<div class="modal" tabindex="-1" role="dialog" id="s">
<div class="modal-dialog modal-lg modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-body">
<div class="row">
<div class="col-4 col-sm-4 col-xl-4">
<h5 class="text-danger">Main Catagories</h5>
<div class="list-group" style="width: 100px; border: none">
<a
class="list-group-item list-group-item-action active"
id="list-vehicle-list"
data-toggle="list"
href="#list-vehicle"
role="tab"
aria-controls="vehicle"
>Vehicle</a
>
<a
class="list-group-item list-group-item-action"
id="list-property-list"
data-toggle="list"
href="#list-property"
role="tab"
aria-controls="property"
>Property</a
>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div
class="tab-pane fade show active"
id="list-vehicle"
role="tabpanel"
aria-labelledby="list-vehicle-list"
>
<a href="#" class="list-group-item list-group-item-action"
>Vehical1</a
>
<a href="#" class="list-group-item list-group-item-action"
>Vehical2</a
>
<a href="#" class="list-group-item list-group-item-action"
>Vehical3</a
>
<a href="#" class="list-group-item list-group-item-action"
>Vehical4</a
>
<a href="#" class="list-group-item list-group-item-action"
>Vehical5</a
>
</div>
<div
class="tab-pane fade"
id="list-property"
role="tabpanel"
aria-labelledby="list-property-list"
>
<a href="#" class="list-group-item list-group-item-action"
>Property1</a
>
<a href="#" class="list-group-item list-group-item-action"
>Property2</a
>
<a href="#" class="list-group-item list-group-item-action"
>Property3</a
>
<a href="#" class="list-group-item list-group-item-action"
>Property4</a
>
<a href="#" class="list-group-item list-group-item-action"
>Property5</a
>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Java Scripts-->
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js"
integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
crossorigin="anonymous"
></script>
<!--end of java scripts-->
</body>
</html>

Related

if i click on input field the popup modal opens and after selecting a item it reflect to the clicked input field

The problem is on clicking the item in the popup modal, the data-value is reflecting all the input fields
I have tried this code and it works with that but it is also changing others. The data value should reflect on the particular input field only. currently it is changing all the previous and next input fields
function openmodal(e) {
//prevent(default);
//document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
$('#myModal').modal('show');
$(document).on("click", ".hello", function(event){
event.preventDefault();
e.value=$(this).attr("data-id");
alert(e.value);
$('#myModal').modal('hide');
});
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<input id="image1" onclick="openmodal(this);"/>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<input id="image2" onclick="openmodal(this);"/>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<input id="image3" onclick="openmodal(this);"/>
</div>
</div>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<a class="hello" data-id="2">2</p>
<a class="hello" data-id="3">3</p>
<a class="hello" data-id="4">4</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
Try this:
function openmodal(input) {
$('#myModal').modal('show');
$(".hello").unbind().click(function(event){
$(input).val($(this).attr("data-id"));
$('#myModal').modal('hide');
});
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<input id="image1" onclick="return openmodal(this);"/>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<input id="image2" onclick="return openmodal(this);"/>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<input id="image3" onclick="return openmodal(this);"/>
</div>
</div>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<a class="hello" data-id="2" >2</p>
<a class="hello" data-id="3" >3</p>
<a class="hello" data-id="4" >4</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

faq bootstrap sample --> not working has script error on bootstrap

I have below html. It consists of bootstrap and css url file. And It has two accordion item tab. But find that it has javascript error when open. And when I click on the accordion, it does not show answer. Is there any wrong??
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h3>Default collapse with scaling icon</h3>
<div class="panel-group" id="faqAccordion0">
FAQ Sample Test
<div class="panel panel-default ">
<div class="panel-heading accordion-toggle question-toggle collapsed" data-toggle="collapse" data-parent="#faqAccordion0" data-target="#0">
<h4 class="panel-title">
<a href="#" class="ing">
Testing Question 1 Title
</a>
</h4>
</div>
<div id="0" class="panel-collapse collapse" style="height: 0px;">
<div class="panel-body">
<h5><span class="label label-primary">Answer</span></h5>
Testing Question 1 Content
</div>
</div>
</div>
<div class="panel panel-default ">
<div class="panel-heading accordion-toggle question-toggle collapsed" data-toggle="collapse" data-parent="#faqAccordion0" data-target="#1">
<h4 class="panel-title">
<a href="#" class="ing">
Testing Question 2 Title
</a>
</h4>
</div>
<div id="1" class="panel-collapse collapse" style="height: 0px;">
<div class="panel-body">
<h5><span class="label label-primary">Answer</span></h5>
Testing Question 2 Content
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The error tells you need to include jQuery also.
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous">
</script>
Make sure you included jQuery before including bootstrap.js script
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Included jQuery right before bootstrap.js -->
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h3>Default collapse with scaling icon</h3>
<div class="panel-group" id="faqAccordion0">
FAQ Sample Test
<div class="panel panel-default ">
<div class="panel-heading accordion-toggle question-toggle collapsed" data-toggle="collapse" data-parent="#faqAccordion0" data-target="#0">
<h4 class="panel-title">
<a href="#" class="ing">
Testing Question 1 Title
</a>
</h4>
</div>
<div id="0" class="panel-collapse collapse" style="height: 0px;">
<div class="panel-body">
<h5><span class="label label-primary">Answer</span></h5>
Testing Question 1 Content
</div>
</div>
</div>
<div class="panel panel-default ">
<div class="panel-heading accordion-toggle question-toggle collapsed" data-toggle="collapse" data-parent="#faqAccordion0" data-target="#1">
<h4 class="panel-title">
<a href="#" class="ing">
Testing Question 2 Title
</a>
</h4>
</div>
<div id="1" class="panel-collapse collapse" style="height: 0px;">
<div class="panel-body">
<h5><span class="label label-primary">Answer</span></h5>
Testing Question 2 Content
</div>
</div>
</div>
</div>
</div>
</body>
</html>

How to hide an element within modal fade

I want to hide the text "Enter Password" and the blank box first and show when I click the radio "Private". My code is following. However, it does not work since when I click the "create a new room", the "Enter Password" has already showed in the modal content, and nothing happened when I click Private. How can I fix my code? Thank you so much!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Create Role</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script>
$(document).ready(function(){
$("#pwd, #pwdblank").hide();
$("#inlineRadio2").click(function(){
$("#pwd, #pwdblank").show(500);
});
});
</script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li class="active">Rooms</li>
<li><a data-toggle="modal" data-target="#createRoomModal">Create New Room</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Logout</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
</div>
</div>
<div id="createRoomModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Create a new room</h4>
</div>
<div class="modal-body">
<form id="form_room" method="post" action="/create-room">
<fieldset class="form-group">
<label class="form-check-inline">
<input class="form-check-input" type="radio" name="room_type" id="inlineRadio1" value="public"> Public
</label>
<label class="form-check-inline">
<input class="form-check-input" type="radio" name="room_type" id="inlineRadio2" value="private"> Private
</label>
<label class="form-check-inline">
<p id="pwd">Enter password</p>
<input class="form-check-input" type="text" name="text" id="pwdblank">
</label>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" form="form_room">Create</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="script-index.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
Hello See The Below One Hope you are looking for this...
$(document).ready(function(){
$("#pwd, #pwdblank").hide();
$("#inlineRadio2").click(function(){
$("#pwd, #pwdblank").show(500);
});
$("#inlineRadio1").click(function(){
$("#pwd, #pwdblank").hide(500);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="script-index.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Create Role</title>
<!-- Latest compiled and minified CSS -->
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li class="active">Rooms</li>
<li><a data-toggle="modal" data-target="#createRoomModal">Create New Room</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Logout</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
</div>
</div>
<div id="createRoomModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Create a new room</h4>
</div>
<div class="modal-body">
<form id="form_room" method="post" action="/create-room">
<fieldset class="form-group">
<label class="form-check-inline">
<input class="form-check-input" type="radio" name="room_type" id="inlineRadio1" value="public"> Public
</label>
<label class="form-check-inline">
<input class="form-check-input" type="radio" name="room_type" id="inlineRadio2" value="private"> Private
</label>
<label class="form-check-inline">
<p id="pwd">Enter password</p>
<input class="form-check-input" type="text" name="text" id="pwdblank">
</label>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" form="form_room">Create</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
Use show.bs.modal event as follows
$('#myModal').on('show.bs.modal', function (e) {
// do something...
// this code runs just before the modal is shown
// hide your field here
});
Use documentation reference here

Modal doesn't work in my code

I tried everything and checked it over and over again. But i still can't find what's wrong with my code.
I think the id of the img and the modal is right. And there is also nothing wrong with the head part....
Could you take a look of my code? I'd really appreciate that.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Just a Portfolio</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link href='https://fonts.googleapis.com/css?family=Luckiest+Guy' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/jquery-2.1.4.min.js">
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="img/1.png" alt="heiheihei">
</div>
<div class="col-md-6 text-right">
<h1 class="text-uppercase text-thin title-super">Weikang Zhang</h1>
<h3>It's Now or Never.</h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img class="title-logo img-responsive" src="img/2.jpg" alt="stussy guy">
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2 class="text-muted">Hello</h2>
</div>
</div>
<div class="row">
<div class="col-md-4">
<img class="img-responsive" src="img/a.jpg" data-toggle="modal" data-target="#p1">
</div>
<div class="col-md-4">
<img class="img-responsive" src="img/b.jpg">
</div>
<div class="col-md-4">
<img class="img-responsive" src="img/c.jpg">
</div>
</div>
<div class="row">
<div class="col-md-4">
<h3 class="text-center">Man</h3>
</div>
<div class="col-md-4">
<h3 class="text-center">Book</h3>
</div>
<div class="col-md-4">
<h3 class="text-center">Woman</h3>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="p1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Favorite App Page</h4>
</div>
<div class="modal-body">
<img class="img-responsive" src="images/a.jpeg">
This was my first project in this class. I learned a lot about HTML and CSS.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
problem is here;
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/jquery-2.1.4.min.js">
bootstrap is depended on jquery so load jquery before bootstrap.js
it should be
<script type="text/javascript" src="js/jquery-2.1.4.min.js">
<script type="text/javascript" src="js/bootstrap.js">
Include the jquery js before bootstrap js. Then try.
Apart from placing the source to jquery before bootstrap.js, you need to show the modal. This can be done by $('#modalId').modal('show') Just put this in your JS:
$(document).ready(function(){
$('#p1').modal('show');
});
Here is a Working Demo

Bootstrap toggle is not working?

I have bootstrap tabs implementation when i click on title its not toggling and also when i click on tabs its redirecting to home page its not going into panel body , I spent alot of time but could not figure out the issue. Any help will be appreciated.
So far tried code....
HTML
<div class="panel panel-default">
<div class="panel-body" collapse="isCollapsed">
<accordion close-others="false">
<accordion-group heading="Process Rating" is-open="status.isMetricBaseOpen">
<accordion-heading>
<small>Process Rating <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.isMetricBaseOpen, 'glyphicon-chevron-right': !status.isMetricBaseOpen}"></i></small>
</accordion-heading>
<!-- Process edit mode -->
<ul class="nav nav-tabs" role="tablist" id="myTab">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Line of Business
Ratings</a></li>
<li role="presentation">Compliance Ratings</li>
</ul>
<div class="row tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-md-11">
<button require-control-point="PROCESS_RATING_ADD"
class="btn btn-default pull-right " type="button"
ng-click="gotoQstnPage(1)" ng-disabled="disableRiskRatingBtn">Create
Inherent Risk Rating</button>
</div>
</div>
<strong>Inherent Risk Ratings</strong>
<div kendo-grid="ihtRskRatingGrid"
options="ihtRskRatingGridOptions"></div>
<br /> <strong>Process Ratings</strong>
<div kendo-grid="processRatingGrid"
options="processRatingGridOptions">
<div kendo-window="ProcessRatingWin" options="PrtWinOptions"></div>
</div>
</form>
</div>
<div role="tabpanel" class="tab-pane" id="profile">THis is compliance </div>
</div>
</accordion-group>
</div>
Make sure you have embeded javascript and jquery at the end of the page,
Jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
Javascript
<script src="js/bootstrap.min.js"></script>
Or See below your code is working
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Template</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="panel-group" id="accordion" >
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse"
href="" data-target="#collapseProcessRating">Process Rating</a>
</h4>
</div>
<!-- Process edit mode -->
<div id="collapseProcessRating" class="panel-collapse collapse in">
<div class="panel-body">
<ul class="nav nav-tabs" role="tablist" id="myTab">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Line of Business
Ratings</a></li>
<li role="presentation">Compliance Ratings</li>
</ul>
<div class="row tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-md-11">
<button require-control-point="PROCESS_RATING_ADD"
class="btn btn-default pull-right " type="button"
ng-click="gotoQstnPage(1)" ng-disabled="disableRiskRatingBtn">Create
Inherent Risk Rating</button>
</div>
</div>
<strong>Inherent Risk Ratings</strong>
<div kendo-grid="ihtRskRatingGrid"
options="ihtRskRatingGridOptions"></div>
<br /> <strong>Process Ratings</strong>
<div kendo-grid="processRatingGrid"
options="processRatingGridOptions">
<div kendo-window="ProcessRatingWin" options="PrtWinOptions"></div>
</div>
</form>
</div>
<div role="tabpanel" class="tab-pane" id="profile">THis is compliance </div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>

Categories