Бутстрап 4 | Accordian

28.12.2019Bootstrap, Веб-технологии

В следующем примере показан простой аккордеон, расширяющий компонент панели. Использование атрибута data-parent гарантирует, что все сворачиваемые элементы в указанном родительском элементе будут закрыты при отображении одного из сворачиваемых элементов.
Есть так много типов Аккордеона

Аккордеон по умолчанию
Аккордеон с иконами
Аккордеон с градиентным фоном
Аккордеон с рисунком

Ниже вы увидите каждого из них в действии с соответствующим примером.

Аккордеон по умолчанию:

Пример:

<!DOCTYPE html>

<html lang="en">

<head>

<title>Bootstrap Collapse Demonstration</title>

<meta charset="utf-8">

<meta name="viewport"

content="width=device-width, initial-scale=1">

<link rel="stylesheet" href=

"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<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.7/umd/popper.min.js">

</script>

<script src=

"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">

</script>

<head>

<body>

<div class="container">

<h2 style="padding-bottom: 15px; color:green;">

GeeksforGeeks

</h2>

<p>A Computer Science Portal for Geeks</p>

<div id="accordion">

<div class="card">

<div class="card-header">

<a class="card-link"

data-toggle="collapse"

href="#description1">

GeeksforGeeks

</a>

</div>

<div id="description1"

class="collapse show"

data-parent="#accordion">

<div class="card-body">

GeeksforGeeks is a computer science portal.

It is the best platform to lean programming.

</div>

<div class="card">

<div class="card-header">

<a class="collapsed card-link"

data-toggle="collapse"

href="#description2">

Bootstrap

</a>

</div>

<div id="description2"

class="collapse"

data-parent="#accordion">

<div class="card-body">

Bootstrap is free and open-source

collection of tools for creating

websites and web applications.

</div>

<div class="card">

<div class="card-header">

<a class="collapsed card-link"

data-toggle="collapse"

href="#description3">

HTML

</a>

</div>

<div id="description3"

class="collapse"

data-parent="#accordion">

<div class="card-body">

HTML stands for HyperText Markup Language.

It is used to design web pages using markup

language.

</div>

</body>

</html>

Выход:

Аккордеон со сменными значками: этот пример покажет вам, как добавлять значки плюс и минус в аккордеоне с помощью font-awesome и переключаться при открытии аккордеона с помощью jQuery.

Пример:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content=

"width=device-width, initial-scale=1,

shrink-to-fit=no">

<title>Bootstrap 4 Accordion </title>

<link rel="stylesheet" href=

"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<link rel="stylesheet" href=

"https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<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.7/umd/popper.min.js">

</script>

<script src=

"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">

</script>

<style>

.accordion {

margin: 15px;

}

.accordion .fa {

margin-right: 0.2rem;

}

</style>

<script>

$(document).ready(function() {

// Add minus icon for collapse element which

// is open by default

$(".collapse.show").each(function() {

$(this).prev(".card-header").find(".fa")

.addClass("fa-minus").removeClass("fa-plus");

});

// Toggle plus minus icon on show hide

// of collapse element

$(".collapse").on('show.bs.collapse', function() {

$(this).prev(".card-header").find(".fa")

.removeClass("fa-plus").addClass("fa-minus");

}).on('hide.bs.collapse', function() {

$(this).prev(".card-header").find(".fa")

.removeClass("fa-minus").addClass("fa-plus");

});

</script>

</head>

<body>

<div class="accordion">

<h2 style="padding-bottom: 15px; color:green;">

GeeksforGeeks

</h2>

<p>A Computer Science Portal for Geeks</p>

<div class="accordion" id="accordionExample">

<div class="card">

<div class="card-header" id="headingOne">

<h2 class="mb-0">

<button type="button"

class="btn btn-link"

data-toggle="collapse"

data-target="#collapseOne">

<i class="fa fa-plus"></i>

GeeksforGeeks

</button>

</h2>

</div>

<div id="collapseOne" class="collapse"

aria-labelledby="headingOne"

data-parent="#accordionExample">

<div class="card-body">

<p>

GeeksforGeeks is a computer

science portal. It is the best

platform to lean programming.

</p>

</div>

<div class="card">

<div class="card-header" id="headingTwo">

<h2 class="mb-0">

<button type="button"

class="btn btn-link collapsed"

data-toggle="collapse"

data-target="#collapseTwo">

<i class="fa fa-plus"></i>

Bootstrap

</button>

</h2>

</div>

<div id="collapseTwo" class="collapse show"

aria-labelledby="headingTwo"

data-parent="#accordionExample">

<div class="card-body">

<p>

Bootstrap is a free and open-source

collection of tools for creating

websites and web applications.

</p>

</div>

<div class="card">

<div class="card-header" id="headingThree">

<h2 class="mb-0">

<button type="button"

class="btn btn-link collapsed"

data-toggle="collapse"

data-target="#collapseThree">

<i class="fa fa-plus"></i>

HTML

</button>

</h2>

</div>

<div id="collapseThree" class="collapse"

aria-labelledby="headingThree"

data-parent="#accordionExample">

<div class="card-body">

<p>

HTML stands for HyperText Markup

Language. It is used to design

web pages using markup language.

</p>

</div>

</body>

</html>

Выход:

Аккордеон с градиентным фоном: это простой аккордеон с градиентными цветовыми эффектами.

<!DOCTYPE html>

<html lang="en">

<head>

<title>Bootstrap Collapse Demonstration</title>

<meta charset="utf-8">

<meta name="viewport"

content="width=device-width, initial-scale=1">

<link rel="stylesheet" href=

"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<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.7/umd/popper.min.js">

</script>

<script src=

"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">

</script>

<style>

.card-header{

background-image: linear-gradient(to bottom, green, yellow);

}

.card-body{

background-image: linear-gradient(to right, yellow, white);

}

</style>

<head>

<body>

<div class="container">

<h2 style="padding-bottom: 15px; color:green;">

GeeksforGeeks

</h2>

<p>A Computer Science Portal for Geeks</p>

<div id="accordion">

<div class="card">

<div class="card-header">

<a class="card-link"

data-toggle="collapse"

href="#description1">

GeeksforGeeks

</a>

</div>

<div id="description1"

class="collapse show"

data-parent="#accordion">

<div class="card-body">

GeeksforGeeks is a computer science portal.

It is the best platform to lean programming.

</div>

<div class="card">

<div class="card-header">

<a class="collapsed card-link"

data-toggle="collapse"

href="#description2">

Bootstrap

</a>

</div>

<div id="description2"

class="collapse"

data-parent="#accordion">

<div class="card-body">

Bootstrap is a free and open-source

collection of tools for creating

websites and web applications.

</div>

<div class="card">

<div class="card-header">

<a class="collapsed card-link"

data-toggle="collapse"

href="#description3">

HTML

</a>

</div>

<div id="description3"

class="collapse"

data-parent="#accordion">

<div class="card-body">

HTML stands for Hyper Text Markup

Language. It is used to design web

pages using markup language.

</div>

</body>

</html>

Выход:

Аккордеон с изображением: в этом примере аккордеон будет содержать в себе изображение.

Пример:

<!DOCTYPE html>

<html lang="en">

<head>

<title>Bootstrap Collapse Demonstration</title>

<meta charset="utf-8">

<meta name="viewport"

content="width=device-width, initial-scale=1">

<link rel="stylesheet" href=

"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<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.7/umd/popper.min.js">

</script>

<script src=

"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">

</script>

<style>

.card{

width:600px;

}

.card-body{

width:400px;

float: left;

}

.right-body{

width:100px;

margin:10px;

float : right;

}

img{

width:100px;

height:100px;

}

</style>

<head>

<body>

<div class="container">

<h2 style="padding-bottom: 15px; color:green;">

GeeksforGeeks

</h2>

<p>A Computer Science Portal for Geeks</p>

<div id="accordion">

<div class="card">

<div class="card-header">

<a class="card-link"

data-toggle="collapse"

href="#description1">

GeeksforGeeks

</a>

</div>

<div id="description1"

class="collapse show"

data-parent="#accordion">

<div class="card-body">

GeeksforGeeks is a computer science portal.

It is the best platform to lean programming.

</div>

<div class="right-body">

<img src=

"https://media.geeksforgeeks.org/wp-content/uploads/20190808143838/logsm.png">

</div>

<div class="card">

<div class="card-header">

<a class="collapsed card-link"

data-toggle="collapse"

href="#description2">

Bootstrap

</a>

</div>

<div id="description2"

class="collapse"

data-parent="#accordion">

<div class="card-body">

Bootstrap is a free and open-source

collection of tools for creating

websites and web applications.

</div>

<div class="right-body">

<img src=

"https://media.geeksforgeeks.org/wp-content/uploads/20191126170417/logo6.png">

</div>

<div class="card">

<div class="card-header">

<a class="collapsed card-link"

data-toggle="collapse"

href="#description3">

HTML

</a>

</div>

<div id="description3"

class="collapse"

data-parent="#accordion">

<div class="card-body">

HTML stands for Hyper Text Markup

Language. It is used to design web

pages using markup language.

</div>

<div class="right-body">

<img src=

"https://www.geeksforgeeks.org/wp-content/uploads/html-768x256.png">

</div>

</body>

</html>

Выход:

Рекомендуемые посты:

Бутстрап 4 | Accordian

0.00 (0%) 0 votes