Change vertical slider to horizontal

Question

I am new to jquery and have a vertical menu to be worked upon.The submenus of the menu are too much in number so the menu gets too deep when opened; so I need to slide out the submenus left instead of down when clicked upon. the jquery code for the vertical menu is as follows:

 jQuery(document).ready(function(){

 $(".goo-collapsible > li > a").on("click", function(e){

if(!$(this).hasClass("active")) {

  // hide any open menus and remove all other classes
    $(".goo-collapsible li ul").slideUp(350);
    $(".goo-collapsible li a").removeClass("active");

    // open our new menu and add the open class
    $(this).next("ul").slideDown(350);
    $(this).addClass("active");

}else if($(this).hasClass("active")) {

    $(this).removeClass("active");
    $(this).next("ul").slideUp(350);
  }
 });

});

I want to replace the slideUp() and slideDown() function with some other alternative without editting the other part of the code. I would be too grateful to the supporters :)

Answer 1

You can refer below code. Tried to set correct CSS but still it have some bugs but functionality is there what you are looking for.

 $(".goo-collapsible > li > a").on("click", function(e){ if(!$(this).hasClass("active")) { // hide any open menus and remove all other classes //$(".goo-collapsible li ul").slideUp(350); $(".goo-collapsible li ul").hide(); $(".goo-collapsible li a").removeClass("active"); // open our new menu and add the open class //$(this).next("ul").slideDown(350); $(this).next("ul").show().animate({"left":"140px"}, "slow"); $(this).addClass("active"); }else if($(this).hasClass("active")) { $(this).removeClass("active"); //$(this).next("ul").slideUp(350); $(this).next("ul").animate({"left":"0px"}, "slow",function(){$(this).hide();}); } });

 .goo-collapsible{ width:120px; border: solid 1px black; } .goo-collapsible > li { background:cyan; z-index:10; opacity:1; } .goo-collapsible > li > a { padding: 6px 9.5px; } ul, ol, li { list-style: outside none none; margin: 0; padding: 0; } .dropdown-menu{ display:none; left:0px; position: absolute; z-index:5; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <ul class="goo-collapsible"> <li><a href="javascript:void(0);">Main Category</a> <ul class="dropdown-menu"> <li><a href="/SubCat1">Sub Cat 1</a></li> <li><a href="/SubCat1">Sub Cat 2</a></li> <li><a href="/SubCat1">Sub Cat 3</a></li> </ul> </li> <li> <a href="javascript:void(0);">About us</a> <ul class="dropdown-menu"> <li><a href="/about/history/">History</a></li> <li><a href="/about/team/">The team</a></li> <li><a href="/about/address/">Our address</a></li> </ul> </li> </ul>