i've found here, on stackoverflow, function, should toggle between multiple divs. tried in jsfiddle , worked. me, on website, doesn't work. not @ javascript / jquery, glad help! , 1 more thing - possible set link, clicked on add class "active", have underline or something, see section selected?? thanks! -- fiddle here: https://jsfiddle.net/vkmw86bp/
code below.
html:
<div id="sluzby-nabidka" class="section"> <div class="sluz"><a href="#" data-slide-id="#slidingdiv">div 1</a></div> <div class="sluz"><a href="#" data-slide-id="#slidingdiv_2">div 2</a></div> <div class="sluz"><a href="#" data-slide-id="#slidingdiv_3">div 3</a></div> <div class="sluz"><a href="#" data-slide-id="#slidingdiv_4">div 4</a></div> <div class="sluz"><a href="#" data-slide-id="#slidingdiv_5">div 5</a></div> </div> <div id="text-sluzba" class="section"> <div id="slidingdiv" class="slide-div">1</div> <div id="slidingdiv_2" class="slide-div" style="display:none;">2</div> <div id="slidingdiv_3" class="slide-div" style="display:none;">3</div> <div id="slidingdiv_4" class="slide-div" style="display:none;">4</div> <div id="slidingdiv_5" class="slide-div" style="display:none;">5</div> </div> js:
$.fn.showhide = function (options) { //default vars plugin var defaults = { speed: 1000, easing: '', changetext: 0, showtext: 'show', hidetext: 'hide', slidediv: '.slide-div' }; var options = $.extend(defaults, options); return this.each(function () { $(this).click(function () { $(options.slidediv).hide(); // var stores button you've clicked var toggleclick = $(this), togglediv = $(this).data('slide-id'); // here toggle show/hide correct div @ right speed , using easing effect $(togglediv).fadetoggle(options.speed, options.easing, function () { // fires once animation completed // if(options.changetext==0){ //$(togglediv).is(":visible") ? toggleclick.text(options.hidetext) : toggleclick.text(options.showtext); //} }); }); }); }; $('a').showhide({'slidediv' : '.slide-div'});
since don't have enough reputation yet add comment, i'll speak issue , ask more information, if necessary.
when loaded jsfiddle, didn't work because jquery library not included in fiddle itself. once switched frameworks & extensions selection any jquery library, hit run , worked. this, imo, means jquery import either in wrong place in html dom, or you're not waiting dom ready before hitting code provided. som examples:
<html> <head> <title> </title> <!-- normally, jquery script gets added here --> <script type="javascript" src="path/to/jquery.js"></script> </head> <body> <!-- then, import above code here, either separate js file or inside <script></script> tags --> <script type="javascript" src="path/to/showhide.js"></script> </body> </html> also, should wrap code provided with:
$(document).ready(function() { // code here }); this ensure jquery code doesn't execute until dom loaded. seems me your code running before dom ready lookup isn't finding anchor tags attach showhide functionality to when make call:
$('a').showhide({'slidediv' : '.slide-div'}); 
Comments
Post a Comment