Toggle between three divs

JavaScript
1

I try to toggle between three divs. Which you can see here. The initial div (when coming on the page) is okay. But when you click on one of the other buttons you will see what happens. The entire div is jumping upwards! What am I doing wrong?

2

This has to do with your use of the jQuery .show and .hide methods. Here’s what the jQuery documentation says about the implementation of .show:

When a duration, a plain object, or a “complete” function is provided, .show() becomes an animation method. The .show() method animates the width, height, and opacity of the matched elements simultaneously.

– http://api.jquery.com/show/

What you are doing is asking the <div> to shrink, then grow with each firing event; not the effect you wanted, I’m sure. You might want to try instead resetting the z-index of the <div> you want to show, and setting the other <div>s to a z-index of 1. Good luck!

3

Hi moretea.

I tried it with resetting the z-index but without any success. Could you please suggest another option or plugin?

Thank you in advance

4

Hi,

If you just want to toggle the visibiliy then use toggle instead of the slide animation.

e.g.


 // 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==0){
                //$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
                //}
														
															
            //});
	
$(toggleDiv).toggle();
5

Hi Paul. I am affraid that I not realy understand what you mean? (Javascript is not my strongest point :frowning: ) I have changed it as you can see here, but see what happens!

6

Hi,

The JS should now look like this:


<script>
$.fn.showHide = function (options) {
		$('#slidingDiv_2').hide();
		$('#slidingDiv_3').hide();
    //default vars for the plugin
    var defaults = {
        speed: 2000,
        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();
            // this var stores which button you've clicked
            var toggleClick = $(this),
                toggleDiv = $(this).data('slide-id');
              // 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==0){
                //$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
                //}
																
																

            //});
												$(toggleDiv).toggle();
        });

    });

};
$('a').showHide({'slideDiv' : '.slide-div'});
</script>

I’ve left the original code commented out in case it wasn’t what you wanted.

7

Hi Paul. That works great indeed :). One last question is it possible to fadein/fadeout the text.

8

Hi,

You could fade the whole thing in like this:

Change the .toggle js to this instead:


$(toggleDiv).fadeToggle( "slow", "linear" );

If you don’t want the background to fade then move the background to the parent.

e.g.


.slide-div {background:none}
.fakereal{
 background: url("http://diem.nl/images/site/content.png") repeat ;
}