Show Hide HTML DIV when another DIV Clicked using jQuery

Last Reply 6 months ago By v@run

Posted 6 months ago

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>

 

Posted 6 months ago

Hey v@run,

Please refer it's working as you want.

HTML

<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="https://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $(".item").click(function () {
            $("#lenght").attr('value', $(this).attr("value"));
            return false;
        });
        $(".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();
            $(".slidediv").hide();
        });
    });
</script>
<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,iVBORw0KGgoAAAANSUhEUgAAAIQAAABaCAMAAABOrg7KAAAAkFBMVEUAAADkOjrkOTvmOTvkOTvkPDznPT3jOTrlOTz/P0vkOTvkODvmOTz/YmLkODrlOTvkOTrkODrkOTvkODrkODvkOTvkOTzlOjzqPkDkOTvlODvkODrjOTvkOTvkOTrkOTrtP0HkODvoPT7jODrkOTvkODrlOjzlPD7mOj3kODvkODvoSEjjOTrmOTzkODvjODq4CvWpAAAAL3RSTlMAYH1a/EApwWsIqfRRAul2zvfi2cSCbzoYi4Xs3aObaBG/IfC0lEstMnHTCspHX+ZSgLMAAALbSURBVGje7ZjrkqIwEEZbxUtEQEQFEcX7ZZzZvP/bbW1iETSM3UwNYG3l/DOGeAxfOgEwGAwGg8Fg0Ojyb3E3gFCDBD8CQh0S1gUQapDgU0CoQ4K3oHKUhNd5pi3al9VnU0n0QOOAZLMWiZ2PZLMOCZiJbz4d0KlPgk3EVyno1CcBp5qyqUvo2VxDjnYF/NEk9GzyEBS8AvovJUAWi7HTqARLZDYblFDZjBqUUNlsUkJls0kJlc1GJVggOgwalYAv0WEfNSoBQ9Fj1azEzpbZbFQCPNHlw2lOQmVzXrWE9RJ+z2aFEmRW7yDBu+8g8eG8gQS/SolV67f4zEu0VXt8CFzfd4NDnO8tl6kN9xr+inMar9fx4AwEhkVLlHkuz3A99lw3UYkonmSXL6IfSYwm/IHJKOs+oEiw2Oc5/AUrLzHjGrMyEr2xFuVzWYlVYXGgS5xdrrG8lJJQ82BPh8OpreaCKLHLHJJ+P8ksemUkRlwyHjFxe0djLhnRJJzpPY/XSCR0MLmPx+gSTF5jzSFjbsl0MpKExwXrW5bSo5pKooQnHU6Q4yQtPIrEbSl/Uffab6gSjqu2a8VcTrCDSKiuQ3hgLSshVSKU9w+ekLkICRJTEemn8rTZi1GpEguVwTwyrQtcYmMVvlySw0ZEia34I1qQmVipWyWB7fVPhLwEvUC9ttRnOaBKaBFkpSRsFSt9vmyihAUadu0S/KZVMOtXb0fq/wOROGulnNMgBTOj8w0DVdbyyOZrh8QGWaI4iZgyp6jOTIAIUqxwjkUVpKVesVBAyjZOT0TQf/C92CopFJANjMBK7lZfqqUr97QDUEG2cgLRUg6wju6fj5bU2gEV9FBDH8Dqx2k621pc0gEyyPGOxJwX4AEd5KBLI7W0Qn6FEiBHfiKXgD+QhFAG5OGHCkuT3NVzBqVAHgPpON24n9h2Mo27DvwUJ1xsA9sOtovQAYPBYDAYDP8XfwF2AWw7LszxyAAAAABJRU5ErkJggg=="><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,iVBORw0KGgoAAAANSUhEUgAAAIQAAABaCAMAAABOrg7KAAAAdVBMVEUAAACWlpaYmJibm5uXl5eXl5eXl5eYmJjKysqWlpaYmJiWlpakpKSXl5eXl5eXl5eWlpaXl5eWlpaYmJiXl5eZmZmcnJyXl5eXl5ednZ2WlpaXl5eXl5eWlpaYmJiYmJiYmJiXl5eXl5eXl5eXl5ebm5uWlpbWPIr+AAAAJnRSTlMAz1IgwadAKgJrJfMI94Li2+iKbzszDr9iFcOc1bh0SpK0yHZaI9r4kSUAAALYSURBVGje7ZjbdqowEEDHWEooAVEugnjtJf//iWd1wqUSaQZPNTxkPzLRtZPMkAngcDjGkA/gxUk4CSfhJJyEk3ASTuK/JcTbKNXTJF7Hg2E1AwnpzUFCZnOQWPAZSMjgmRIpG3JscvOJEj5oXDBQ25X4ijCSW5WAGCPv3KpEscJQaVUCPjG0LqxKwBZjZ7sSvlRBqxJwxuDWrkSxxiizKgElRlfCqgR/x3BsVQJyDEdfViWgxvjFrkQV4oCTVQlIcUAirErwPY74sCrRjAiXViXAU623XYmlys3XR0tcvN9QjcWeP1CCTDoHibCagYSs5yAhcyWxWvwV4U+JvWl0olpvJRHA7xRvbwWQ8G6XKM822yQMk+0m49AjVIWYJar0gtOLDml1p4Q4rmXH+iig40iSqM6R7Ijq5T0SbCWvWDFoCSgSLBzU0+dkCR5LjZhPkNhIjfNECe7JG3icKIEOBguzRNzt5c7zdlG3FlSJst0DL2As8NqdCaZIMKlYMIEpyhZSwWgSX6GawaYApIgj9cCnS4gmJ1MODTxtslOQJDxVURl05KrSDnSJo0RO8IOTRI4UCV9NO796phYnp0pwZZ3e6i/XnCBxbiN6mtRUiezm1zqu8iIjSCRty6H/fkWV2PQ52NNm62YgUTONsu+G9aUM2BjvqM5iJbHFHRUwQGCGbwcSo/haycgJ+LiaO9DY4aWDKqGdnVxOQOWxN7JpIVUCNMKnS+grIf52O06HbwwSmX6pJ9InZjiemC3LEfKmjAbEym1JghtK1MxC/9zY9mN7IGJ4WZmJe139IRHDa9tMFam11M+eaAlUPgwHmJGz1j6UyqsGKoajnEDR/MEhByS/SGRdARVDU0Ogv0YldRzXiWw4ARlDe0fiU96gBDqGRpdoEckB0SQHQ8tPxF/IK/Y5TMFw+aHCy73sSEoB9yA+tGvgRHgWv3zfZXfxK4c70C/EDoeDzD/xr3T9JKxK4gAAAABJRU5ErkJggg=="><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,iVBORw0KGgoAAAANSUhEUgAAAIEAAABaCAMAAACoh8WOAAAAdVBMVEUAAACXl5eWlpaXl5eYmJiXl5eXl5empqaXl5eWlpaWlpaXl5eXl5eXl5empqaXl5eXl5eWlpaXl5eXl5eXl5ednZ2YmJiYmJiYmJiampqXl5eYmJibm5uXl5eWlpaXl5eampqXl5eXl5eWlpaYmJiZmZmWlpZzCbpbAAAAJnRSTlMAWvuwTWFSBvbz2OrhzwqlgsSKv6kPdG87IOaQGcu4mipqfXVGM/ycqm8AAAK4SURBVGje7ZjrkqIwEEZbVO6CoiAIeJ9+/0fcolOaguCmsca4VZvzk5pYJ53ORzNgsVgsFovlP2GOL1jCOOYMDgmMYs4A1zCKQYOggTEMGuAJjEAG9WzAkRTOYAIyWMCAyu8eH8EEqgGRYccdRjBkkEfd8xWMYMgALi9jyZSBFxqJJWmgsjATS9JAZfsilswZ/JiJJWmgkhqIJcXAaCypBqZjSTUwHUuqgelYUg2YsWTUAFzsuIKCAQMDsaQaMGPJoIGMJYdiCX8VnoGMpU8boPMaJO6fNGCx+roBLr9ucEi+afDZWCKDevlkfQwPvn8Ij2v5rKVYAibeoqjTbP/zVh54twifRIXXiyVgcU6Dx7ld88kGbow9YhcEbIOkdlASzSYarFFhPc2gWWGfkzfFIMUR0ikGVayu5xvICvib3W7jyyqwDbwWBUG7DR0UZGwD9xF+bkIH6j4K6rINaiQ29670+eWARMk08EQBnT082YttxB7T4Ex/71yeXbmjZSHT4CYEei/JhVAoGAayj2bKkwXPQOTAHnrsxZ3iGeTkW/fuJo2ZW5ZBiaNz+UqcJMtgRj2Yq2Omk3MMMtF044NqxjJIZQkkMf06x0AMpEp8eAGVkWXQjn1fnZDJIqRrBAob6maWAW23gT4XtgHtdQcKO6oNy4AacVjFmUkDuk3Dplv+1in4HRoD+onhULBGBrIT/QQGJL7oRA70b9jb2A7qmZ5Gcxs5FCOJcqb1FTDQJBKHswhltY1C4KBJZRakG1XKTbgBi+JvbyY98sjCSgr4Mqi1aN7OPFpRsotY0JxwygY0EwqPKkAiOhXL69xBYgM8NFMaexcKcQM8NJMqW8EfClTARDOtsynj3vJ5Dlw0Xyx8vGuAD8Lpy9WvtjdI3LSNnLjNSniPMtuGQRBusxIsFovFYrH84/wBMzYtWDj6mkEAAAAASUVORK5CYII="><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="10 tyre" class="item" style="color: #b7aeae; font-size: 13px; font-weight: bolder;
                line-height: 11px; padding: 1em; text-align: center; border: 2px solid #c7c0c0;
                border-radius: 50px; margin-left: 170px; margin-top: -73px; width: 45%;">
                10 tyre</div>
            <br>
            <div value="12 tyre" class="item" style="color: #c7c0c0; 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: 176px; width: 45%;">
                12 tyre</div>
            <br>
            <div value="14 tyre" class="item" style="color: #c7c0c0; font-size: 13px; font-weight: 400;
                line-height: 14px; padding: 1em; text-align: center; border: 2px solid #c7c0c0;
                border-radius: 37px; margin-right: -89px; margin-left: 172px; margin-top: -63px;
                width: 45%;">
                14 tyre</div>
            <br>
            <div value="18 tyre" class="item" style="color: #bfb8b8; 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: 95px; width: 45%; margin-top: 4px;">
                18 tyre</div>
            <br>
            <div value="22 tyre" class="item" style="color: #a9a0a0; font-size: 13px; font-weight: bolder;
                line-height: 14px; padding: 1em; text-align: center; border: 2px solid #c7c0c0;
                border-radius: 37px; margin-left: 172px; margin-right: -96px; margin-top: -63px;
                width: 45%;">
                22 tyre</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="19-22 ft sxl" 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: 167px; width: 45%; margin-top: -74px;">
                19-22 ft sxl</div>
            <br>
            <div value="24 ft sxl" 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: -14px;">
                24 ft sxl</div>
            <br>
            <div value="24 ft mxl" 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: 168px; width: 45%; margin-top: -73px;">
                24 ft mxl</div>
            <br>
            <div value="32 ft sxl" 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: -14px;">
                32 ft sxl</div>
            <br>
            <div value="32 ft sxl 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: 171px; width: 45%; margin-top: -75px;">
                32 ft sxl HQ</div>
            <br>
            <div value="32 ft mxl" 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: -12px;">
                32 ft mxl</div>
            <br>
            <div value="32 ft mxl 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: 171px; width: 45%; margin-top: -73px;">
                32 ft mxl HQ</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>

Demo


Posted 6 months ago

i got the answer

   <script>
       jQuery(function () {
           jQuery('#showall').click(function () {
               jQuery('.targetDiv').show();
           });
           jQuery('.showSingle').click(function () {
               $(".slidediv").hide();
               jQuery('.targetDiv').hide();
               jQuery('#div' + $(this).attr('target')).show();
           });
       });
   </script>