Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Aug 2008
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts

    JQuery Div Toggle: how make it slide horiz instead of vert?

    I got the plugin from http://papermashup.com/jquery-show-hide-plugin/ , but I will post the code here anyway. It works perfectly, I just want it to slide from side to side instead of up and down.

    I tried changing the height to width in the css.

    Here is the plugin:

    Code:
    (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 () {
    // optionally add the class .toggleDiv to each div you want to automatically close
                          $('.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);
    Here is the js I put in the body:

    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: 1, // 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
    
    	});
    
    });
    Here is the html:

    Code:
    <a class="show_hide" href="#" rel="#slidingDiv">View</a></pre>
    <div id="slidingDiv" class="toggleDiv" style="display: none;">Fill this space with really interesting content.</div>
    
     <a class="show_hide" href="#" rel="#slidingDiv_2">View</a></pre>
    <div id="slidingDiv_2" class="toggleDiv" style="display: none;">Fill this space with really interesting content.</div>
    And here is the css:

    Code:
    #slidingDiv, #slidingDiv_2, #slidingDiv_3, #slidingDiv_4{
    	width: 734px;
    	background-color: #ffffff;
    	margin-top:60px;
    	margin-left:100px;
    	display:none;
    }

  • #2
    New Coder
    Join Date
    Jul 2011
    Location
    Chennai, India
    Posts
    23
    Thanks
    0
    Thanked 5 Times in 5 Posts
    I think, you need accordion with horizontal rather than vertical.

    Hope the below link will suite your requirement.
    http://www.portalzine.de/Horizontal_...n_2/index.html

  • #3
    New Coder
    Join Date
    Aug 2008
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks that might be just the thing!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •