Как сделать так, что-бы при клике на подпункт -"Ливия" оставался только один активный элемент?

Question

lilandre @lilandre

Как сделать так, что-бы при клике на подпункт -"Ливия" оставался только один активный элемент?

Нужно сделать Faq на сайт. Так вот, при клики на подпункты страны, должен быть активен только один подпункт. А у меня 2-3 активны,увы. https://jsfiddle.net/lilandre/ebdLao9g/

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta name="viewport" content="display-width-display,initial_scale=1.0">
	<!-- 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">

<link rel="stylesheet" type="text/css" href="style3.css">

<!-- 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">


  <script
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  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-fluid">
<div class="row">
	<div class="Bodyfaq col-lg-12 ">
		
		<div class="AskMe col-lg-2 ">
			<ul >
			<li style="list-style-type: none" class=" bg-primary Tiparent"> Ливия</li>
				<ul type="disk" class="accordion" id="myAccordion">
					<li  > <p  data-toggle="collapse" data-target="#collapsible-1" data-parent="#myAccordion">Столица</p></li>
					<li > <p data-toggle="collapse" data-target="#collapsible-2" data-parent="#myAccordion">Культура</p></li>
					<li > <p  data-toggle="collapse" data-target="#collapsible-3" data-parent="#myAccordion">Достопримечательности</p></li>
				</ul>
			</ul>

		</div>

		<div class="space col-lg-1 ">		
		</div>

		<div class="answer col-lg-7 bg-info">
			<div id="collapsible-1" class="collapse answBody">
			Очень красивая столица которой насчитывается 1000 лет. <strong>text<stroong> ....
			</div>
			<div id="collapsible-2" class="collapse answBody">
			В Ливии сейчас происходит <strong>Золотой век<stroong> ....
			</div>
			<div id="collapsible-3" class="collapse answBody">
			Очень много людей с оружием. <strong>text<stroong> ....
			</div>
			

		</div>

	</div>
</div>
</div>


</body>
</html>

.Bodyfaq{
height:  700px;
margin: 30px 10px 30px 10px;


}

.Nanswer{
height: 300px;
width: 300px;
}


.AskMe{
	min-height: 300px;

}

.answBody{
min-height: 300px;
}


.Tiparent{
	color: white;
	padding-left: 10px;
}

.accordion button {
    
    display: block;
}