Witam serdecznie,
Ucząc się HTML i CSS korzystam z gotowych szablonów Bootstrapa by nauczyć się możliwości HTML i CSS.
Mam dwa przyciski 'Przycisk 1', 'Przycisk 2', które mają rozwinąć treść podpiętą pod przycisk (pill). Wszystko działa tak jak oczekuję, aczkolwiek nie mogę doszukać się opcji do:
- zwinięcia rozwiniętej treści po ponownym kliknięciu na przycisk,
- zwinięcia rozwiniętej treści po kliknięciu na obszar poza diva 'row'.
Z jakimi pojęciami powinienem się zapoznać by rozwiązać dwie powyższe kwestie?
HTML:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Test</title>
<meta name="description" content="description">
<meta name="keywords" content="Keywords">
<meta name="author" content="Autor">
<meta http-equiv="X-Ua-Compatible" content="IE=edge">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin-ext" rel="stylesheet">
</head>
<body>
<main>
<section class="jumpers">
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="nav nav-pills">
<li class="li-center-button"><button data-toggle="pill" class="btn btn-primary btn-xl text-uppercase" href="#Przycisk1">Przycisk 1</button></li>
<li class="li-center-button"><button data-toggle="pill" class="btn btn-primary btn-xl text-uppercase" href="#Przycisk2">Przycisk 2</button></li>
</ul>
<div class="tab-content ">
<div id="Przycisk1" class="tab-pane"> <!-- tab-pane fade in active -->
<p>
<li class="list">Przycisk 1 - tekst 1;</li>
<li class="list">Przycisk 1 - tekst 2;</li>
<li class="list">Przycisk 1 - tekst 3;</li>
</p>
</div>
<div id="Przycisk2" class="tab-pane">
<p>
<li class="list">Przycisk 2 - tekst 1;</li>
<li class="list">Przycisk 2 - tekst 2;</li>
<li class="list">Przycisk 2 - tekst 3;</li>
</p>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS:
body
{
background-color: #2F3336;
color: #efefef;
font-family: 'Open Sans', sans-serif;
font-size: 17px;
}
h1
{
font-size: 36px;
font-weight: 400;
color: #C0D06F;
margin: 20px;
}
.jumpers
{
text-align: center;
}
.jumpers img
{
width: 100%;
height: auto;
}
.jumpers p
{
margin-bottom: 30px;
}
.jumpers figcaption
{
margin-top: 8px;
}
.li-center-button{
position: relative;
text-align: center;
margin: auto;
}
.row {
border-style: dotted;
}