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>
Related
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>
I have two sets of JQuery Accordions within a single DIV tag.i want to show two Accordions activate. is this possible?
see this image
Remove the data-parent attribute.
.panel-heading .accordion-toggle:after {
/* symbol for "opening" panels */
font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */
content: "\e114"; /* adjust as needed, taken from bootstrap.css */
float: right; /* adjust as needed */
color: grey; /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
/* symbol for "collapsed" panels */
content: "\e080"; /* adjust as needed, taken from bootstrap.css */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 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>
<h2>Multiple Slides:</h2>
<div class="panel-group" id="accordion2">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">
Group #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Test 1
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" href="#collapseTwo">
Group #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Test 2
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" href="#collapseThree">
Group #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Test 3
</div>
</div>
</div>
</div>
there is a way to set a button visible only when a panel is collapsed? I tried the bellow code but without success. I also tried to use getElementById("#closeButton").style.visibility but it still not working.
function checkCollapsed(){
if($("#panel").hasClass('ui-collapsible-collapsed')){
$("#closeButton").hide();
}else{
$("#closeButton").show();
}
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="panel-group col-lg-1">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#panel" onclick="checkCollapsed()">test</a>
<button id="closeButton" type="button" class="close" aria-label="Close" >
<span aria-hidden="true">×</span>
</button>
</h4>
</div>
<div id="panel" class="panel-collapse collapse">
blablabla
</div>
</div>
</div>
.in class is being added to #panel element. ui-collapsible-collapsed remain there all the time.
function checkCollapsed() {
if ($("#panel").hasClass('in')) {
$("#closeButton").hide();
} else {
$("#closeButton").show();
}
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="panel-group col-lg-1">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#panel" onclick="checkCollapsed()">test</a>
<button id="closeButton" type="button" class="close" aria-label="Close" >
<span aria-hidden="true">×</span>
</button>
</h4>
</div>
<div id="panel" class="panel-collapse collapse">
blablabla
</div>
</div>
</div>
I supose that the problem is when your click, is before change the class.
One idea is to make a little timeout:
function checkCollapsed(){
setTimeout(function(){
if($("#panel").hasClass('ui-collapsible-collapsed')){
$("#closeButton").hide();
}else{
$("#closeButton").show();
}
}, 110);
}
The idea is take a time to collapside panel to change status, and class.
Expect it help
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
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>