Displaying from the left side to the right side

Having some issues with sliding from the left to right div that has display:none.

<div class="second">
<li><a id="sale_man" rel="showinfo"><?php echo $lang['sale_man'];?></a></li>
<li><a id="purch_man" rel="showinfo"><?php echo $lang['purch_man'];?></a></li>
<li><a id="load_man" rel="showinfo"><?php echo $lang['load_man'];?></a></li>
<li><a id="acc_man" rel="showinfo"><?php echo $lang['acc_man'];?></a></li>
</ul></div>
<div  class="third" style="display: none;" >
lolo</div>

$('#sale_man').click(function(){
     $('.third').show("slide", { direction: "right" }, 1000);
});

When I click on id="sale_man", the aim is to slide the div with class 3, but unfortunately nothing happens..

Answer №1

Yorgo pointed out an important issue of the missing <ul> tag, but there are a few more errors to address.

In particular, pay attention to this line:

$('.third').show("slide", { direction: "right" }, 1000);

By changing it to:

$('.third').show();

You can observe the div appearing without the intended animation, indicating incorrect syntax in your code.

When referring to the API documentation page for show(),

You will notice that the function does not support the arguments you have used in your script.

This discrepancy suggests either a customized show function in your code or the need for a jQuery plugin that aligns with your requirements.

UPDATE: It appears that you may require this specific jQuery UI plugin.

Answer №2

Your memory fails you with the tag

<div class="second">
    <ul>
    <li><a id="sale_man" rel="showinfo"><?php echo $lang['sale_man'];?></a></li>
    <li><a id="purch_man" rel="showinfo"><?php echo $lang['purch_man'];?></a></li>
    <li><a id="load_man" rel="showinfo"><?php echo $lang['load_man'];?></a></li>
    <li><a id="acc_man" rel="showinfo"><?php echo $lang['acc_man'];?></a></li>
    </ul></div>

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

Border at the Top and Text Alignment Problem

I am working on a basic navigation bar that includes a hover effect. .navip { float: left; text-decoration: none; font-weight: lighter; } .navip > a { display: block; color: black; text-decoration: none; font-size: 20px; ...

Steps to add a new entry by simply clicking on a hyperlink with AJAX within the WordPress platform

Currently, I am in the process of creating a WordPress plugin. Seeking a Resolution My aim is to perform a record insertion (which could involve any CRUD operation) when a user clicks on the order-button link. Being relatively new to Ajax, I am facing ...

Switch up between two distinct colors every three elements using a single selector

I have a group of tr items in my list and I want to apply CSS styles to them in a specific pattern : red red red black black black red red red black and so on. Is there a way to achieve this using just one selector? Currently, I'm doing it like th ...

The aspect ratio of an image is being calculated by loading the image twice

I am currently facing the issue where the same image is loading twice for a single preview. The first time the image is loaded for preview purposes in an iframe. The second time, the image metadata such as width and height are fetched with the same path. ...

Can an onload function be triggered within the location.href command?

Can a function be called onload in the location.href using jQuery? location.href = getContextPath() + "/home/returnSeachResult?search=" + $('#id-search-text-box').val() + "&category=" + $('#search_concept').text() + "onload='j ...

The Input element's onChange event is not functioning as expected

I am experiencing some issues with my code. I am trying to dynamically change the background color based on user input, but I am struggling to make it work. It seems like a simple task, so I must be missing something. Below is my HTML markup and jQuery: ...

Storing parent entity along with child entities containing selected properties using ASP.NET Core MVC

Working on an ASP.NET Core MVC web app, I encountered a problem that can be best explained through this example: Let's consider a scenario where the user needs to save information about a book including its title, number of pages, and one or more aut ...

Verify the Absence of an Internet Connection Through a Popup on a Windows 10 Application Developed in Javascript

Hey there, I've been browsing the web but can't seem to find a comprehensive tutorial on how to write a code that displays an error message when there is no internet connection. I'm currently using Visual Studio to develop a Windows 10 App w ...

Will inserting a * in a CSS file affect the styling in Internet Explorer?

I've been tasked with updating an older project to incorporate the latest technologies. Within the project's style sheets, some styles are prefixed with: #calendarDiv{ position:absolute; width:220px; *width:215px; *max-width:210px; border:1px s ...

Retrieving a page using jQuery

Below is the JavaScript code that I am using: $.ajax({ url: "test.html", error: function(){ //handle error }, success: function(){ //perform actions here with the received data } }); After retrieving test.html, I am wo ...

How can I delete the onmouseover function in HTML?

Is there a way to remove the (onmouseover="mouseoversound.playclip()") function from the following HTML code? <a href="roster.html" onmouseover="mouseoversound.playclip()">Roster</a> Can we instead implement this functionality in a JavaScript ...

Opacity effect on input text when it exceeds the input boundaries

I'm having an issue: I need to create inputs with different states, including when the text is longer than the input itself. In this case, the extra text should fade out with a gradient transparency effect: https://i.sstatic.net/r5qQu.jpg Here is my ...

encountering error 404 with rails and ajax request

I encountered this particular error in my Rails logs: Completed 404 Not Found in 11ms ** [Raven] User excluded error: #<ActionController::RoutingError: Not Found> ActionController::RoutingError (Not Found): app/controllers/schools_controller.rb:6 ...

Transform regular text into HTML format

I've encountered a scenario where I retrieve HTML data using an AJAX call in my script. The challenge is to convert this HTML content into plain text, similar to the following: $("#div").text(data); Now, I'm interested in reversing this process ...

Having trouble with the JQuery Ajax POST method? Maybe try using $.post instead

As a coding novice, I attempted to create a jQuery Ajax program that displays the ID and password entered by the client. However, I'm facing issues with getting it to work as intended. I've gone over the code multiple times <fieldset> & ...

The View Component is experiencing issues with loading the CSS and JS files correctly when an AJAX call is made

Hey there! I'm having trouble loading a view component via ajax when the button is clicked. It seems like the css and javascript are not working properly. Check out the ajax call for the controller to load the component: $.ajax({ url: window.locat ...

Integrating Instagram photos onto a website

I came across this code on a forum, but unfortunately, it didn't work as expected for me. The photo didn't display, only the header appeared. Is there anyone who can assist me with this issue? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

Transfer information to a different html page and store it

Seeking guidance on transferring the entire content of input.html to approve.html for validation and database storage. Any tips or advice would be greatly appreciated as I am new to this and have been struggling with this issue for a week. <form action= ...

One way to trigger the same modal to open when clicking on a shared class using jQuery

I need some assistance with opening a model upon clicking the same link. Currently, when I click on the link, only the backdrop briefly appears and then the page reloads. Any help would be greatly appreciated. Thank you in advance. Below is the code snipp ...

CSS vertical alignment property

I'm facing a rather simple problem that has left me scratching my head. The vertical align property is performing correctly, but as soon as I introduce a tag after the text meant to be centered along the image, any text that follows the tag appe ...