bootstrap - zakładki, przyciski - ukrywanie

Question

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&amp;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;
 }

 

Answer 1

Position: hidden, i js(tu nwm dokładnie co)

Answer 2

Może i za wcześnie ale zapoznaj się z Jquery a dokładnie zdarzeniami głównie click() i hide()