ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Show Hide HTML DIV when another DIV Clicked using jQuery<p>Hey&nbsp;<a href="mailto:v@run,">v@run,</a></p> <p>Please refer it's working as you want.</p> <p><span style="text-decoration: underline;"><strong>HTML</strong></span></p> <div class="demo_block"> <pre class="brush: html">&lt;link rel=&#34;stylesheet&#34; href=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css&#34; /&gt; &lt;script src=&#34;https://code.jquery.com/jquery-3.3.1.slim.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js&#34;&gt;&lt;/script&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css&#34;&gt; &lt;script src=&#34;https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://code.jquery.com/jquery-1.8.2.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script&gt; $(document).ready(function () { $(&#34;.item&#34;).click(function () { $(&#34;#lenght&#34;).attr(&#39;value&#39;, $(this).attr(&#34;value&#34;)); return false; }); $(&#34;.slidediv&#34;).hide(); $(&#39;.showhide&#39;).click(function () { $(&#34;.slidediv&#34;).slideToggle(); }); }); &lt;/script&gt; &lt;script&gt; jQuery(function () { jQuery(&#39;#showall&#39;).click(function () { jQuery(&#39;.targetDiv&#39;).show(); }); jQuery(&#39;.showSingle&#39;).click(function () { jQuery(&#39;.targetDiv&#39;).hide(); jQuery(&#39;#div&#39; + $(this).attr(&#39;target&#39;)).show(); $(&#34;.slidediv&#34;).hide(); }); }); &lt;/script&gt; &lt;div&gt; &lt;div class=&#34;box &#34;&gt; &lt;p class=&#34;title&#34;&gt; Truck type&lt;/p&gt; &lt;div class=&#34;col-md-12 &#34;&gt; &lt;a class=&#34;showSingle&#34; target=&#34;1&#34;&gt; &lt;div class=&#34;&#34;&gt; &lt;div class=&#34; vehicle-item padding-adjust&#34; style=&#34;height: 0px; margin-left: 249px;&#34;&gt; &lt;img src=&#34;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==&#34;&gt;&lt;span style=&#34;color: grey; margin-left: 16px; font-size: 15px; font-weight: bolder;&#34;&gt;OPEN&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/a&gt;&lt;a class=&#34;showSingle&#34; target=&#34;2&#34;&gt; &lt;div class=&#34;&#34;&gt; &lt;div class=&#34;vehicle-item&#34; style=&#34;height: 2px; margin-left: 466px;&#34;&gt; &lt;img src=&#34;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==&#34;&gt;&lt;span style=&#34;color: grey; margin-left: 16px; font-size: 15px; font-weight: bolder;&#34;&gt;CONTAINER&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/a&gt;&lt;a class=&#34;showSingle&#34; target=&#34;3&#34;&gt; &lt;div class=&#34;&#34;&gt; &lt;div class=&#34;vehicle-item&#34;&gt; &lt;img src=&#34;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIEAAABaCAMAAACoh8WOAAAAdVBMVEUAAACXl5eWlpaXl5eYmJiXl5eXl5empqaXl5eWlpaWlpaXl5eXl5eXl5empqaXl5eXl5eWlpaXl5eXl5eXl5ednZ2YmJiYmJiYmJiampqXl5eYmJibm5uXl5eWlpaXl5eampqXl5eXl5eWlpaYmJiZmZmWlpZzCbpbAAAAJnRSTlMAWvuwTWFSBvbz2OrhzwqlgsSKv6kPdG87IOaQGcu4mipqfXVGM/ycqm8AAAK4SURBVGje7ZjrkqIwEEZbVO6CoiAIeJ9+/0fcolOaguCmsca4VZvzk5pYJ53ORzNgsVgsFovlP2GOL1jCOOYMDgmMYs4A1zCKQYOggTEMGuAJjEAG9WzAkRTOYAIyWMCAyu8eH8EEqgGRYccdRjBkkEfd8xWMYMgALi9jyZSBFxqJJWmgsjATS9JAZfsilswZ/JiJJWmgkhqIJcXAaCypBqZjSTUwHUuqgelYUg2YsWTUAFzsuIKCAQMDsaQaMGPJoIGMJYdiCX8VnoGMpU8boPMaJO6fNGCx+roBLr9ucEi+afDZWCKDevlkfQwPvn8Ij2v5rKVYAibeoqjTbP/zVh54twifRIXXiyVgcU6Dx7ld88kGbow9YhcEbIOkdlASzSYarFFhPc2gWWGfkzfFIMUR0ikGVayu5xvICvib3W7jyyqwDbwWBUG7DR0UZGwD9xF+bkIH6j4K6rINaiQ29670+eWARMk08EQBnT082YttxB7T4Ex/71yeXbmjZSHT4CYEei/JhVAoGAayj2bKkwXPQOTAHnrsxZ3iGeTkW/fuJo2ZW5ZBiaNz+UqcJMtgRj2Yq2Omk3MMMtF044NqxjJIZQkkMf06x0AMpEp8eAGVkWXQjn1fnZDJIqRrBAob6maWAW23gT4XtgHtdQcKO6oNy4AacVjFmUkDuk3Dplv+1in4HRoD+onhULBGBrIT/QQGJL7oRA70b9jb2A7qmZ5Gcxs5FCOJcqb1FTDQJBKHswhltY1C4KBJZRakG1XKTbgBi+JvbyY98sjCSgr4Mqi1aN7OPFpRsotY0JxwygY0EwqPKkAiOhXL69xBYgM8NFMaexcKcQM8NJMqW8EfClTARDOtsynj3vJ5Dlw0Xyx8vGuAD8Lpy9WvtjdI3LSNnLjNSniPMtuGQRBusxIsFovFYrH84/wBMzYtWDj6mkEAAAAASUVORK5CYII=&#34;&gt;&lt;span style=&#34;color: grey; margin-left: 16px; font-size: 15px; font-weight: bolder;&#34;&gt;TRAILER&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#34;input-group&#34;&gt; &lt;input id=&#34;lenght&#34; type=&#34;text&#34; class=&#34;form-control&#34; name=&#34;email&#34; placeholder=&#34;select truck length&#34; /&gt; &lt;span class=&#34;input-group-addon&#34; style=&#34;position: relative; width: 14%;&#34;&gt;&lt;a href=&#34;#&#34; data-toggle=&#34;popover&#34; title=&#34;Popover Header&#34; data-content=&#34;.list&#34;&gt;&lt;a href=&#34;#&#34; class=&#34;showhide&#34;&gt; &lt;i class=&#34;glyphicon glyphicon-chevron-left&#34;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/span&gt; &lt;/div&gt; &lt;div id=&#34;div1&#34; class=&#34;targetDiv&#34;&gt; &lt;div class=&#34;slidediv&#34;&gt; &lt;div class=&#34;list&#34; id=&#34;myList&#34; style=&#34;margin-right: 587px; bottom: 540px;&#34;&gt; &lt;div class=&#34;heading&#34; value=&#34;na&#34; style=&#34;color: black;&#34;&gt; SELECT TRUCK LENGTH&lt;/div&gt; &lt;div value=&#34;6 tyre(19-24 ft)&#34; class=&#34;item selected&#34; style=&#34;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;&#34;&gt; 6 tyre(19-24 ft)&lt;/div&gt; &lt;br&gt; &lt;div value=&#34;10 tyre&#34; class=&#34;item&#34; style=&#34;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%;&#34;&gt; 10 tyre&lt;/div&gt; &lt;br&gt; &lt;div value=&#34;12 tyre&#34; class=&#34;item&#34; style=&#34;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%;&#34;&gt; 12 tyre&lt;/div&gt; &lt;br&gt; &lt;div value=&#34;14 tyre&#34; class=&#34;item&#34; style=&#34;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%;&#34;&gt; 14 tyre&lt;/div&gt; &lt;br&gt; &lt;div value=&#34;18 tyre&#34; class=&#34;item&#34; style=&#34;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;&#34;&gt; 18 tyre&lt;/div&gt; &lt;br&gt; &lt;div value=&#34;22 tyre&#34; class=&#34;item&#34; style=&#34;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%;&#34;&gt; 22 tyre&lt;/div&gt; &lt;br&gt; &lt;div value=&#34;LCV (14-17 ft)&#34; class=&#34;item&#34; style=&#34;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;&#34;&gt; LCV (14-17 ft)&lt;/div&gt; &lt;br&gt; &lt;div value=&#34;Tempo 407&#34; class=&#34;item&#34; style=&#34;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;&#34;&gt; Tempo 407&lt;/div&gt; &lt;br&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id=&#34;div2&#34; class=&#34;targetDiv&#34;&gt; &lt;div class=&#34;slidediv&#34;&gt; &lt;div class=&#34;list&#34; style=&#34;bottom: 500px; margin-right: 586px;&#34;&gt; &lt;div class=&#34;heading&#34; value=&#34;na&#34; style=&#34;color: black;&#34;&gt; SELECT TRUCK LENGTH&lt;/div&gt; &lt;div value=&#34;LCV (14-17 ft)&#34; class=&#34;item&#34; style=&#34;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;&#34;&gt; LCV (14-17 ft)&lt;/div&gt; &lt;br&gt; &lt;div value=&#34;19-22 ft sxl&#34; class=&#34;item&#34; style=&#34;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;&#34;&gt; 19-22 ft sxl&lt;/div&gt; &lt;br&gt; &lt;div value=&#34;24 ft sxl&#34; class=&#34;item&#34; style=&#34;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;&#34;&gt; 24 ft sxl&lt;/div&gt; &lt;br&gt; &lt;div value=&#34;24 ft mxl&#34; class=&#34;item&#34; style=&#34;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;&#34;&gt; 24 ft mxl&lt;/div&gt; &lt;br&gt; &lt;div value=&#34;32 ft sxl&#34; class=&#34;item&#34; style=&#34;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;&#34;&gt; 32 ft sxl&lt;/div&gt; &lt;br&gt; &lt;div value=&#34;32 ft sxl HQ&#34; class=&#34;item&#34; style=&#34;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;&#34;&gt; 32 ft sxl HQ&lt;/div&gt; &lt;br&gt; &lt;div value=&#34;32 ft mxl&#34; class=&#34;item&#34; style=&#34;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;&#34;&gt; 32 ft mxl&lt;/div&gt; &lt;br&gt; &lt;div value=&#34;32 ft mxl HQ&#34; class=&#34;item&#34; style=&#34;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;&#34;&gt; 32 ft mxl HQ&lt;/div&gt; &lt;br&gt; &lt;div value=&#34;32 ft txl&#34; class=&#34;item&#34; style=&#34;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;&#34;&gt; 32 ft txl&lt;/div&gt; &lt;br&gt; &lt;div value=&#34;32 ft txl HQ&#34; class=&#34;item&#34; style=&#34;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;&#34;&gt; 32 ft txl HQ&lt;/div&gt; &lt;br&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id=&#34;div3&#34; class=&#34;targetDiv&#34;&gt; &lt;div class=&#34;slidediv&#34;&gt; &lt;div class=&#34;list&#34; style=&#34;bottom: 670px; margin-right: 585px;&#34;&gt; &lt;div class=&#34;heading&#34; value=&#34;na&#34; style=&#34;color: black;&#34;&gt; SELECT TRUCK LENGTH&lt;/div&gt; &lt;br&gt; &lt;div value=&#34;High bed&#34; class=&#34;item&#34; style=&#34;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;&#34;&gt; High bed&lt;/div&gt; &lt;br&gt; &lt;div value=&#34;Semi bed&#34; class=&#34;item&#34; style=&#34;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;&#34;&gt; Semi bed&lt;/div&gt; &lt;br&gt; &lt;div value=&#34;Low bed&#34; class=&#34;item&#34; style=&#34;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;&#34;&gt; Low bed&lt;/div&gt; &lt;br&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;</pre> </div> <p><a class="demo button orange btn btn-red">Demo</a></p>https://www.aspforums.net:443/Threads/791566/Show-Hide-HTML-DIV-when-another-DIV-Clicked-using-jQuery/https://www.aspforums.net:443/Threads/791566/Show-Hide-HTML-DIV-when-another-DIV-Clicked-using-jQuery/Mon, 17 Dec 2018 06:00:23 GMTShow Hide HTML DIV when another DIV Clicked using jQuery<p>i got the answer</p> <pre class="brush: js"> &lt;script&gt; jQuery(function () { jQuery(&#39;#showall&#39;).click(function () { jQuery(&#39;.targetDiv&#39;).show(); }); jQuery(&#39;.showSingle&#39;).click(function () { $(&#34;.slidediv&#34;).hide(); jQuery(&#39;.targetDiv&#39;).hide(); jQuery(&#39;#div&#39; + $(this).attr(&#39;target&#39;)).show(); }); }); &lt;/script&gt;</pre> <p>&nbsp;</p>https://www.aspforums.net:443/Threads/791566/Show-Hide-HTML-DIV-when-another-DIV-Clicked-using-jQuery/https://www.aspforums.net:443/Threads/791566/Show-Hide-HTML-DIV-when-another-DIV-Clicked-using-jQuery/Tue, 18 Dec 2018 01:52:21 GMT