Transforming Toggle down div into a sliding animation from right to left using javascript

Hey there, I have two divs - one named basic and the other advanced. There's a button to show the advanced div. Currently, when I click on the button, it toggles down. However, I would like it to slide from right to left instead.

Here's the HTML code:

<div class="container" id="divBasic">Basic data</div>

<div class="container top_offset" id="divAdvanced" style=""> Advanced data</div>

    <a style="float:right; margin-right: 10px; padding-right: 10px" href="javascript:void(0);" onclick="toggle_advanced(this);" id="hpAdvanced_top">Show Advanced ></a>

And here's the JavaScript code:

function toggle_basic(source) {

   var div = $("#divBasic");
   var top_btn = $("#divButtons");

   div.toggle();
   top_btn.toggle();
   $("#divShapes").toggle();

   if (source == "shapes") {
       storeValue("Basic", "none");
   } else {
       storeValue("Basic", "block");
   }

}



function toggle_advanced(hp) {

   var divAdvanced = $("#divAdvanced");

   divAdvanced.toggle();


   if (hp.outerText != "Show Advanced") {
       storeValue("Advanced", "none");
       hp.innerText = "Show Advanced";
   } else {
       storeValue("Advanced", "block");
       hp.innerText = "Hide Advanced";
   }
}

If anyone can help me achieve the sliding effect for the advanced div, I would greatly appreciate it.

Thank you!

javascriptjqueryhtmlcss

Answer №1

function toggle_basic(source) {

    var div = $("#divBasic");
    var top_btn = $("#divButtons");

    div.toggle();
    top_btn.toggle();
    $("#divShapes").toggle();

    if (source == "shapes") {
        saveSetting("Basic", "none");
    } else {
        saveSetting("Basic", "block");
    }

}



function toggle_advanced(hp) {

    var divAdvanced = $("#divAdvanced");

    divAdvanced.toggle("slide");


    if (hp.outerText != "Show Advanced") {
        //saveSetting("Advanced", "none");
        //top_btn.css("height", "30px");
        hp.innerText = "Show Advanced";
    } else {
        //saveSetting("Advanced", "block");
        //top_btn.css("height", "0px");
        hp.innerText = "Hide Advanced";
    }
                                            }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="container" id="divBasic">Basic data</div>

<div class="container top_offset" id="divAdvanced" style=""> Advanced data</div>

    <a style="float:right; margin-right: 10px; padding-right: 10px" href="javascript:void(0);" onclick="toggle_advanced(this);" id="hpAdvanced_top">Hide Advanced ></a>

Utilize ele.toggle("slide"); for sliding from left to right, along with jquery-ui integration for the effect

Answer №2

try this out

 $('#divAdvanced').toggle('slide', {
        direction: 'right'
    }, 1500);

feel free to replace right with down if you prefer

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Switch back and forth between two tabs positioned vertically on a webpage without affecting any other elements of the page

I've been tasked with creating two toggle tabs/buttons in a single column on a website where visitors can switch between them without affecting the page's other elements. The goal is to emulate the style of the Personal and Business tabs found on ...

javascripthtmlcsstabstogglebutton

Using Mongoose to increment a sub-document key

I could really use some assistance with the following issue. I'm trying to increment the keys like 'eagle', 'bear', etc. by one in my data model: { "_id" : ObjectId("57e134097a578b11eruogf0a2cb"), "email" : "<a href="/cdn-cgi/l ...

javascriptnode.jsmongodbmongoose

Prevent displaying page confirmation prompts when a user clicks on hyperlinks

One way to display a confirmation message when a user tries to leave the current page is by using this method: window.addEventListener("beforeunload", function (e) { var confirmationMessage = "Are you sure you want to leave?"; ...

javascript

How can I pass a variable name as an argument in Vue?

I am exploring ways to create a method that can efficiently load and assign JSON files to dynamic variables. Despite my efforts, varA and varB are not being populated as expected: data() { return { varA: Array, varB: Array } }, ...

javascriptvue.js

Tips for tackling horizontal black lines in Outlook emails

<!DOCTYPE html> <html> <head> <title></title> </head> <body> <table align="center" border="0" cellpadding="0" cellspacing="0" class="main" style="border-top: 1px solid rgb(220, 220, 220);" width="650"> ...

htmluser-interfacehtml-email

using db.eval() to call db.collection.find()

On my Node.js platform, I have created a JavaScript function that is executed within db.eval() on MongoDB. Here is the original JS function: function(data){ var d = { vehicle_id:data.vehicle_id, timestamp:{ $gte:data.start ...

javascriptmongodb

The search bar - just the initial choice is functional

I am having some trouble with my search box. It has two options, 'search catalog' and 'search site', each with different urls. However, only the 'search catalog' option seems to be working properly. When I select 'search ...

javascriptphpjquery

Utilizing Jquery select2 to enhance user experience by organizing JSON data with optgroup and

Currently, I am working with select2 in conjunction with spring mvc. The data I need to display is retrieved from my controller and should be displayed as options. However, I would like these options to be grouped within optgroups while also incorporating ...

javascriptjqueryjquery-select2

Unusual Behavior of jQuery Ajax StatusCode

$.get('/users/test/' + username, { statusCode: { 409: () => { valid = false; alert(username + ' is unavailable'); }, 200: () => { valid = true; } } }); When sending a requ ...

jqueryajax

What could be causing my css stylesheet to not function properly in Sinatra?

I'm fairly new to this, but based on my research, this code should be functioning correctly. I am attempting to link a CSS stylesheet to an .erb file. Here is the code snippet I am using: <link rel="stylesheet" type="text/css" h ...

htmlcssrubysinatra

What impact does rotation have on an orthographic camera within the Three.js framework?

I am working in Three.js with a scene that includes a plane and an orthographic camera. Orthographic camera at -90deg: When the camera is rotated to -90 deg on the x-axis (looking straight down from above), only the plane is visible in the view. Scene s ...

javascriptvectorthree.jscameratrigonometry

Google Chrome Back Button not saving radio button selections

We have noticed an issue with Google Chrome wherein the back button does not retain radio box selections when submitting a form that contains all radio boxes. This seems to be specific to Chrome and is not observed in other browsers like IE and Firefox. B ...

htmlformsgoogle-chrome

Is there an undefined error when clicking on a row in a dynamically created table?

When creating a table and adding a row click event with the purpose of retrieving the value of the first td, the following code is used: function bclick(){ var result=[]; SAPget.step4QueryTable(function(data){ var tbody=document.querySelector( ...

javascript

How can you call a function in JavaScript based on a condition?

Is there a way to conditionally truncate text using a function called Truncate only when the offsetHeight of the left div with class demo is greater than the offsetHeight of the right div? If this condition is not met, then simply return the original conte ...

javascripthtmlcss

Conceal the Download Button Effectively

I operate a website for playing audio files and I am looking to prevent users from downloading the sounds using the download button in the HTML audio element. Here is what I came up with: <audio src="sound.mp3" controls controlsList="nodownload">< ...

html

What is the best way to style an image with CSS when it is not contained within a disabled parent element?

Struggling to find a way to add a hover effect to an image that is not inside a disabled element? Although it seems like the css selector below should do the trick, it doesn't quite work as expected. In this scenario, I only want the hover effect on e ...

htmlcsshover

Execute document.write and open within the current window

I'm encountering an issue while trying to write to a document: NewWindow.document.write("Hi, this is test"); NewWindow = window.open("pages/Example.html","_self"); However, the page appears blank. If I use NewWindow.document.write("Hi, this is test ...

javascript

The element <li> is not permitted to be a descendant of the <select> element

Encountering an error when using the native attribute in the Select component: <TextField select value={options.length ? value : defaultValue} SelectProps={{ native: true, }}> Utilizing the material UI Textfield component. validateDOMNe ...

htmlreactjsdrop-down-menumaterial-uitextfield

Executing a Javascript function through Typescript in an Ionic application

I integrated a plugin into my ionic project, which includes both Java and JS code: cordova.define("cordova-sms-plugin.Sms", function(require, exports, module) { 'use strict'; var exec = require('cordova/exec'); var sms = {}; functio ...

javascriptjavatypescriptcordovaionic-framework

AngularJS - Using filters to extract specific options from multiple <select> components

There are N "select" components generated based on JSON data, with the "options" populated by an external API. I am trying to implement a custom filter that ensures when an option is selected in one "select" component, it should not appear in the other com ...

javascriptangularjsfilter