Databases
StackOverflow2013
Postsdbo
POhow to make the div autohide when click other button
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POhow to make the div autohide when click other button
    text
    copied!<p><strong>hai im working with show/hide slider with div..evrything is working fine with my coding.. but i want my div or my content will auto hide when i click another button(image in my coding)..</strong></p> <p>i hope that anybody can help me with this..thanks in advance..</p> <p>this is my html</p> <pre><code>&lt;div id="slidingDiv"&gt; &lt;a href="#" class="show_hide" rel="#slidingDiv11"&gt; &lt;img src="../img/choose/mens.png"&gt; &lt;/a&gt; &lt;a href="#" class="show_hide" rel="#slidingDiv12"&gt; &lt;img src="../img/choose/womens.png"&gt; &lt;/a&gt; &lt;div id="slidingDiv11"&gt; &lt;img src="../img/choose/clothings.png"&gt;&lt;br&gt;&lt;br&gt; &lt;img src="../img/choose/shoes.png"&gt;&lt;br&gt;&lt;br&gt; &lt;img src="../img/choose/bags.png"&gt;&lt;br&gt;&lt;br&gt; &lt;img src="../img/choose/accessories.png"&gt; &lt;/div&gt; &lt;div id="slidingDiv12"&gt; &lt;img src="../img/choose/clothings.png"&gt;&lt;br&gt;&lt;br&gt; &lt;img src="../img/choose/shoes.png"&gt;&lt;br&gt;&lt;br&gt; &lt;img src="../img/choose/bags.png"&gt;&lt;br&gt;&lt;br&gt; &lt;img src="../img/choose/accessories.png"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="slidingDiv1"&gt; &lt;a href="#" class="show_hide" rel="#slidingDiv16"&gt; &lt;img src="../img/choose/book.png"&gt; &lt;a&gt; &lt;a href="#" class="show_hide" rel="#slidingDiv17"&gt; &lt;img src="../img/choose/textbooks.png"&gt; &lt;/a&gt; &lt;div id="slidingDiv16"&gt; &lt;img src="../img/choose/books1.png"&gt; &lt;img src="../img/choose/books1.png"&gt; &lt;img src="../img/choose/books1.png"&gt; &lt;/div&gt; &lt;div id="slidingDiv17"&gt; &lt;img src="../img/choose/textbooks1.png"&gt; &lt;img src="../img/choose/textbooks1.png"&gt; &lt;img src="../img/choose/textbooks1.png"&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>this is my css</p> <pre><code>#slidingDiv, #slidingDiv1, #slidingDiv2, #slidingDiv3, #slidingDiv4, #slidingDiv5, #slidingDiv6, #slidingDiv7, #slidingDiv8, #slidingDiv9, #slidingDiv10, #slidingDiv11, #slidingDiv12, #slidingDiv13, #slidingDiv14, #slidingDiv15, #slidingDiv16, #slidingDiv17 { height:300px; padding:20px; margin-top:10px; border-bottom:5px; display:none; } </code></pre> <p>this is my js</p> <pre><code>$(document).ready(function () { $('.show_hide').showHide({ speed: 1000, // speed you want the toggle to happen easing: '', // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI changeText: 0, // if you dont want the button text to change, set this to 0 showText: 'View', // the button text to show when a div is closed hideText: 'Close' // the button text to show when a div is open }); }); (function ($) { $.fn.showHide = function (options) { //default vars for the plugin var defaults = { speed: 1000, easing: '', changeText: 0, showText: 'Show', hideText: 'Hide' }; var options = $.extend(defaults, options); $(this).click(function () { $('.toggleDiv').slideUp(options.speed, options.easing); // this var stores which button you've clicked var toggleClick = $(this); // this reads the rel attribute of the button to determine which div id to toggle var toggleDiv = $(this).attr('rel'); // here we toggle show/hide the correct div at the right speed and using which easing effect $(toggleDiv).slideToggle(options.speed, options.easing, function () { // this only fires once the animation is completed if (options.changeText == 1) { $(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText); } }); return false; }); }; })(jQuery); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload