i have three div tag elements and its working propery on page load..
i want it to work like that through out...
when a user clicks a truck on a page load..the content is hiding and afetr clicking the icon the content is shown...
but after clicking for the second time ..the content is shown directly..
i want the content to be hidden when user clicks the truck and shown when the icon is clicked..throughout the program
<head runat="server">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<script>
$(document).ready(function () {
$(".item").click(function () {
$("#lenght").attr('value', $(this).attr("value"));
return false;
});
});
</script>
<script type="text/javascript">
$(function () {
$(".slidediv").hide();
$('.showhide').click(function () {
$(".slidediv").slideToggle();
});
});
</script>
<script>
jQuery(function () {
jQuery('#showall').click(function () {
jQuery('.targetDiv').show();
});
jQuery('.showSingle').click(function () {
jQuery('.targetDiv').hide();
jQuery('#div' + $(this).attr('target')).show();
});
});
</script>
<body>
<form id="form1" runat="server">
<div>
<div class="box ">
<p class="title">Truck type</p>
<div class="col-md-12 ">
<a class="showSingle" target="1"
<div class="">
<div class=" vehicle-item padding-adjust" style="height: 0px; margin-left: 249px;">
<img src="data:image/png;base64,iVBORw0KG..."><span style="color: grey;margin-left: 16px;font-size: 15px;font-weight: bolder;">OPEN</span>
</div>
</div></a>
<a class="showSingle" target="2">
<div class="">
<div class="vehicle-item" style="height: 2px; margin-left: 466px;">
<img src="data:image/png;base64,iVBORw0KG..."><span style="color: grey;margin-left: 16px;font-size: 15px;font-weight: bolder;">CONTAINER</span>
</div>
</div></a>
<a class="showSingle" target="3">
<div class="">
<div class="vehicle-item">
<img src="data:image/png;base64,iVBORw0KG..."><span style="color: grey;margin-left: 16px;font-size: 15px;font-weight: bolder;">TRAILER</span>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="input-group">
<input id="lenght" type="text" class="form-control" name="email" placeholder="select truck length"/>
<span class="input-group-addon" style="position: relative; width: 14%;">
<a href="#" data-toggle="popover" title="Popover Header" data-content=".list"> <a href="#" class="showhide"><i class="glyphicon glyphicon-chevron-left"></i> </a></span>
</div>
<div id="div1" class="targetDiv">
<div class="slidediv">
<div class="list" id="myList" style="margin-right: 587px;bottom: 540px;">
<div class="heading" value="na" style="color: black;">SELECT TRUCK LENGTH</div>
<div value="6 tyre(19-24 ft)" class="item selected" style="color: #cac3c3;font-size: 13px;font-weight: bolder;line-height: 12px;padding: 1em;text-align: center;border: 2px solid #c7c0c0;border-radius: 37px;margin: 12px;margin-left: 8px;width: 45%;margin-top: 3px;">6 tyre(19-24 ft)</div><br>
<div value="LCV (14-17 ft)" class="item" style="color: #887c7cb3;font-size: 13px;font-weight: bolder;line-height: 14px;padding: 1em;text-align: center;border: 2px solid #c7c0c0;border-radius: 37px;margin-left: 8px;margin-right: 91px;width: 45%;margin-top: -1px;">LCV (14-17 ft)</div><br>
<div value="Tempo 407" class="item" style="color: #9a9292;font-size: 13px;font-weight: bolder;line-height: 14px;padding: 1em;text-align: center;border: 2px solid #c7c0c0;border-radius: 37px;margin-top: -63px;width: 45%;margin-left: 174px;">Tempo 407</div><br>
</div>
</div>
</div>
<div id="div2" class="targetDiv">
<div class="slidediv">
<div class="list" style="bottom: 500px;margin-right: 586px;">
<div class="heading" value="na" style="color: black;">SELECT TRUCK LENGTH</div>
<div value="LCV (14-17 ft)" class="item" style="color: #cac3c3;font-size: 13px;font-weight: bolder;line-height: 12px;padding: 1em;text-align: center;border: 2px solid #c7c0c0;border-radius: 37px;margin: 12px;margin-left: 8px;width: 45%;margin-top: 16px;">LCV (14-17 ft)</div><br>
<div value="32 ft txl" class="item" style="color: #cac3c3;font-size: 13px;font-weight: bolder;line-height: 12px;padding: 1em;text-align: center;border: 2px solid #c7c0c0;border-radius: 37px;margin: 12px;margin-left: 8px;width: 45%;margin-top: -13px;">32 ft txl</div><br>
<div value="32 ft txl HQ" class="item" style="color: #cac3c3;font-size: 13px;font-weight: bolder;line-height: 12px;padding: 1em;text-align: center;border: 2px solid #c7c0c0;border-radius: 37px;margin: 12px;margin-left: 173px;width: 45%;margin-top: -73px;margin-bottom: -6px;">32 ft txl HQ</div><br>
</div>
</div>
</div>
<div id="div3" class="targetDiv">
<div class="slidediv">
<div class="list" style="bottom:670px;margin-right: 585px;">
<div class="heading" value="na" style="color: black;">SELECT TRUCK LENGTH</div><br>
<div value="High bed" class="item" style="color: #cac3c3;font-size: 13px;font-weight: bolder;line-height: 12px;padding: 1em;text-align: center;border: 2px solid #c7c0c0;border-radius: 37px;margin: 12px;margin-left: 11px;width: 45%;margin-top: 3px;">High bed</div><br>
<div value="Semi bed" class="item" style="color: #cac3c3;font-size: 13px;font-weight: bolder;line-height: 12px;padding: 1em;text-align: center;border: 2px solid #c7c0c0;border-radius: 37px;margin: 12px;margin-left: 169px;width: 45%;margin-top: -73px;">Semi bed</div><br>
<div value="Low bed" class="item" style="color: #cac3c3;font-size: 13px;font-weight: bolder;line-height: 12px;padding: 1em;text-align: center;border: 2px solid #c7c0c0;border-radius: 37px;margin: 12px;margin-left: 96px;width: 45%;margin-top: -11px;margin-bottom: -7px;">Low bed</div><br>
</div>
</div></div>
</form>
</body>
