JSFiddle - React, Tailwind, and code Playground

by Tymoteusz Czech

HTML

<div class="row">
		<div class="col-md-3">
			<img src="//otobilge.com/Images/Resimler/thumb/Mazda-2-HB-3K-2008-2010-0.jpg" class="img img-thumbnail img-responsive"/>
			<p>2 Serisi</p>
		<div id="model_290" class="modellerList">
			<div class="col-md-12">
				<div class="panel panel-default">
					<div class="panel-body">
						<ul>
								<li>
									<span> 2 Hatchback 3 Kapı</span>

										<span><a href="#" class="btn btn-info"> 2010-</a></span>
										<span><a href="#" class="btn btn-info"> 2008-2010</a></span>

								</li>
								<hr />
								<li>
									<span> 2 Hatchback 5 Kapı</span>

										<span><a href="#" class="btn btn-info"> 2010-</a></span>
										<span><a href="#" class="btn btn-info"> 2007-2010</a></span>

								</li>
								<hr />
								<li>
									<span> 2 MPV 5 Kapı</span>

										<span><a href="#" class="btn btn-info"> 2006-2008</a></span>
										<span><a href="#" class="btn btn-info"> 2003-2006</a></span>

								</li>
								<hr />

						</ul>
					</div>
				</div>
			</div>
	</div>
		</div>
		<div class="col-md-3">
			<img src="//otobilge.com/Images/Resimler/thumb/Mazda-6-Sedan-4K-2002-2005-0.jpg" class="img img-thumbnail img-responsive"/>
			<p>6 Serisi</p>
		<div id="model_291" class="modellerList">
			<div class="col-md-12">
				<div class="panel panel-default">
					<div class="panel-body">
						<ul>
								<li>
									<span> 6 Sedan 4 Kapı</span>

										<span><a href="#" class="btn btn-info"> 2013-</a></span>
										<span><a href="#" class="btn btn-info"> 2010-2012</a></span>
										<span><a href="#" class="btn btn-info"> 2007-2010</a></span>
										<span><a href="#" class="btn btn-info"> 2005-2007</a></span>
										<span><a href="#" class="btn btn-info"> 2002-2005</a></span>

								</li>
								<hr />
								<li>
									<span> 6 SportBreak  Station Wagon 5 Kapı</span>

										<span><a href="#" class="btn btn-info"> 2012-</a></span>
										<span><a href="#"...

CSS

.modellerList{display:none;}
.modellerList ul{list-style:none;padding:0;}
.modellerList ul li{margin-bottom:10px;margin:10px;}

JavaScript

$(".row").append('<div class="col-md-12 info"></div>');

$("img").on("click", function(){
    $(".info").html("");
    $(this).closest(".row").find(".info").html($(this).siblings(".modellerList").html());
});