tag:blogger.com,1999:blog-30297993760818372192024-09-09T23:22:59.827-07:00UdemyAdminhttp://www.blogger.com/profile/05452916240579031907noreply@blogger.comBlogger1125tag:blogger.com,1999:blog-3029799376081837219.post-31062276214388710262018-06-29T07:47:00.001-07:002018-06-29T09:44:40.490-07:00edemu<html lang="en">
<head>
<title>Bootstrap Example</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"></link>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet"></link>
<style type="text/css">
*{font-family: 'Open Sans', sans-serif;}
.accordion_container {
width: 100%;
height: 450px;
overflow-y: scroll;
}
.container{
height: 550px;
}
.accordion_head {
background-color:white;
color: #807373;
cursor: pointer;
font-family: arial;
font-size: 14px;
margin: 0 0 1px 0;
padding: 7px 11px;
font-weight: 600;
}
.accordion_body {
background: white;
}
.accordion_body p {
padding: 5px 5px;
margin: 0px;
display: block;
overflow: hidden;
}
/*.accordion_body p:hover {
background-color: #eceaea;
}*/
.accordion_body p a {
font-size: 14px;
color:#56534d;
}
.accordion_body p i {
margin-right: 20px;
}
.plusminus {
float:right;
}
.accordion_body p:hover {
background: #cdd2d8;
color: #ffffff;
}
.active{
background-color: #74b9ff;
color:white;
}
</style>
</head>
<body>
<div class="container bg-info p-5">
<div class="row">
<div class="col-7 ">
<iframe height="450" src="https://drive.google.com/file/d/1UPIh6inbnKCYUhB7weY69wELKZ7ghMsS/preview" width="100%"></iframe>
</div>
<div class="col-5">
<div class="accordion_container">
<div class="accordion_head">
First Accordian Head<span class="plusminus">+</span>
</div>
<div class="accordion_body" style="display: none;">
<i class="fa fa-play"></i>
<a href="https://www.blogger.com/u/4/blogger.g?blogID=3029799376081837219#">1. Bài 1: Giới Thiệu và hướng dẫn luyện tập</a>
<br />
<!-- end-p -->
<i class="fa fa-play"></i>
<a href="https://www.blogger.com/u/4/blogger.g?blogID=3029799376081837219#">1. Bài 1: Giới Thiệu và hướng dẫn luyện tập</a>
<br />
<!-- end-p -->
<i class="fa fa-play"></i>
<a href="https://www.blogger.com/u/4/blogger.g?blogID=3029799376081837219#">1. Bài 1: Giới Thiệu và hướng dẫn luyện tập</a>
<br />
<!-- end-p -->
<i class="fa fa-play"></i>
<a href="https://www.blogger.com/u/4/blogger.g?blogID=3029799376081837219#">1. Bài 1: Giới Thiệu và hướng dẫn luyện tập</a>
<br />
<!-- end-p -->
<i class="fa fa-play"></i>
<a href="https://www.blogger.com/u/4/blogger.g?blogID=3029799376081837219#">1. Bài 1: Giới Thiệu và hướng dẫn luyện tập</a>
<br />
<!-- end-p -->
<i class="fa fa-play"></i>
<a href="https://www.blogger.com/u/4/blogger.g?blogID=3029799376081837219#">1. Bài 1: Giới Thiệu và hướng dẫn luyện tập</a>
<br />
<!-- end-p -->
<i class="fa fa-play"></i>
<a href="https://www.blogger.com/u/4/blogger.g?blogID=3029799376081837219#">1. Bài 1: Giới Thiệu và hướng dẫn luyện tập</a>
<br />
<!-- end-p -->
<i class="fa fa-play"></i>
<a href="https://www.blogger.com/u/4/blogger.g?blogID=3029799376081837219#">1. Bài 1: Giới Thiệu và hướng dẫn luyện tập</a>
<br />
<!-- end-p -->
<i class="fa fa-play"></i>
<a href="https://www.blogger.com/u/4/blogger.g?blogID=3029799376081837219#">1. Bài 1: Giới Thiệu và hướng dẫn luyện tập</a>
<br />
<!-- end-p -->
<i class="fa fa-play"></i>
<a href="https://www.blogger.com/u/4/blogger.g?blogID=3029799376081837219#">1. Bài 1: Giới Thiệu và hướng dẫn luyện tập</a>
<br />
<!-- end-p -->
<i class="fa fa-play"></i>
<a href="https://www.blogger.com/u/4/blogger.g?blogID=3029799376081837219#">1. Bài 1: Giới Thiệu và hướng dẫn luyện tập</a>
<br />
<!-- end-p -->
<i class="fa fa-play"></i>
<a href="https://www.blogger.com/u/4/blogger.g?blogID=3029799376081837219#">1. Bài 1: Giới Thiệu và hướng dẫn luyện tập</a>
<br />
<!-- end-p -->
<i class="fa fa-play"></i>
<a href="https://www.blogger.com/u/4/blogger.g?blogID=3029799376081837219#">1. Bài 1: Giới Thiệu và hướng dẫn luyện tập</a>
<br />
<!-- end-p -->
<i class="fa fa-play"></i>
<a href="https://www.blogger.com/u/4/blogger.g?blogID=3029799376081837219#">1. Bài 1: Giới Thiệu và hướng dẫn luyện tập</a>
<br />
<!-- end-p -->
</div>
<div class="accordion_head">
Second Accordian Head<span class="plusminus">+</span>
</div>
<div class="accordion_body" style="display: none;">
Second Accordian Body, it will have description<br />
</div>
<div class="accordion_head">
Third Accordian Head<span class="plusminus">+</span>
</div>
<div class="accordion_body" style="display: none;">
Third Accordian Body, it will have description<br />
</div>
</div>
<!-- end-col-md-5 -->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script>
$(".accordion_body p a").click(function() {
$(this).parent().addClass('active');
});
//end add active
$(document).ready(function () {
//toggle the component with class accordion_body
$(".accordion_head").click(function () {
if ($('.accordion_body').is(':visible')) {
$(".accordion_body").slideUp(300);
$(".plusminus").text('+');
}
if ($(this).next(".accordion_body").is(':visible')) {
$(this).next(".accordion_body").slideUp(300);
$(this).children(".plusminus").text('+');
} else {
$(this).next(".accordion_body").slideDown(300);
$(this).children(".plusminus").text('-');
}
});
});
</script>
</div>
</div>
</body>
</html>
Adminhttp://www.blogger.com/profile/05452916240579031907noreply@blogger.com