Sliding a div from right > to left <

Question

I have been searching for a code snippet that I assumed would already be out there somwhere. There are many different variations that I have found but none of which are best suited for me. I have attempted to modify jsfiddles ive found and tweak other examples but to no avail.

As I have little to no prior experience with javascript and Jquery languages I hoped someone on here could help.

In my current project I have a single page in which all the content is loaded. currently I have six divs all hidden off screen to the right. with a vertical navigation menu sitting on the left. What I want is for when a link with the assigned div is clicked, that targeted div slides on screen from right to left and stops next to the navigation menu.

The twist, however is when a new link is clicked the content of the previous div to slide off screen allowing the newely selected div to replace it.

Hopefully I have explained myself well enough.

The content divs I want slided are =

id="content-one"

id="content-two"

and so on.

Any solutions or pointers in the right direction would be extreamly usefull many thanks in advance.

This is what i was originally trying to modify but i was unsuccessful...

$(document).ready(function(){
  $("#navigation li a").on("click", function(e){
    e.preventDefault();`enter code here`
    var hrefval = $(this).attr("href");

    if(hrefval == "#content-one") {
      var distance = $('#container').css('right');

      if(distance == "auto" || distance == "0px") {
        $(this).addClass("open");
        activateSlider();
      } else {
        deactivateSlider();
      }
    }
  }); // end click event handler

 // $("#closebtn").on("click", function(e){
//    e.preventDefault();
//    closeSidepage();
//  }); // end close button event handler

  function activateSlider() {
    $('#container').animate({
      right: '350px'
    }, 400, 'easeOutBack'); 
  }

  function deactivateSlider(){
    $("#navigation li a").removeClass("open");
    $('#container').animate({
      right: '0px'
    }, 400, 'easeOutQuint');  
  }
});

Answer 1

Try like this,

Here .panel your sliding div class

JS Fiddle

 $(document).ready(function() { var settings = { objSlideTrigger: '#trigger', // link button id objSlidePanel: '.panel' // slide div class or id } $(settings.objSlideTrigger).on('click', function() { //If the panel isn't out if (!$(settings.objSlidePanel).hasClass('out')) { slidePanelOut(); } else if ($(settings.objSlidePanel).hasClass('out')) { slidePanelIn(); } }); function slidePanelOut() { //Animate it to left $(settings.objSlidePanel).animate({ 'right': '-67%' }); //Add the out class $(settings.objSlidePanel).addClass('out'); } function slidePanelIn() { //Otherwise, animate it back in $(settings.objSlidePanel).animate({ 'right': '-89%' }); //Remove the out class $(settings.objSlidePanel).removeClass('out'); } });

 .panel { width: 85%; padding: 2%; position: fixed; right: -89%; top: 46px; z-index: 2; background: #2F2F2F; box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2); border-radius: 1% 1% 1% 1%; border-radius: 5px; } .trigger { width: 8%; text-align: center; color: goldenrod; position: absolute; top: 26px; padding: 0.5% 0%; border-top-left-radius: 10px; border-bottom-left-radius: 10px; background: #2F2F2F; right: 30%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="panel" class="panel"> <!-- Trigger -->content </div> <a id="trigger" class="trigger">click here</a>