The functionality of displaying one div while hiding another upon click seems to be malfunctioning

Can anyone lend a hand?

I'm having trouble with my code - the section isn't showing up after clicking the button.


<script>
$("#img1").on('click', function() {
   $("#div1").fadeIn();
   $("#div2,#div3,#div4").fadeOut();
});
$("#img2").on('click', function() {
   $("#div2").fadeIn();
   $("#div1,#div3,#div4").fadeOut();
});
$("#img3").on('click', function() {
   $("#div3").fadeIn();
   $("#div1,#div2,#div4").fadeOut();
});
$("#img4").on('click', function() {
   $("#div4").fadeIn();
   $("#div1,#div2,#div3").fadeOut();
});
</script>

Thank you in advance!

Answer №1

This is a different choice aside from the one provided by @aviboy2006.

To utilize the $ sign, you can include the jQuery path.

<link rel='stylesheet' id='dashicons-css'  href='http://bookshark.phlexon.com/wp-includes/css/dashicons.min.css?ver=5.4.1' type='text/css' media='all' />
<!-- ****************** Add in jQuery path ************************************************-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- ***************************************************************************************-->
<script type='text/javascript' src='http://bookshark.phlexon.com/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp'></script>
<script type='text/javascript' src='http://bookshark.phlexon.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
<script type='text/javascript' src='//cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js?ver=5.4.1'></script>

After that, your code will function as shown below: (enclose within $(document).ready(function(){)

$(document).ready(function(){
    $("#img1").on('click', function() {
       $("#div1").fadeIn();
       $("#div2,#div3,#div4").fadeOut();
    });
    $("#img2").on('click', function() {
       $("#div2").fadeIn();
       $("#div1,#div3,#div4").fadeOut();
    });
    $("#img3").on('click', function() {
       $("#div3").fadeIn();
       $("#div1,#div2,#div4").fadeOut();
    });
    $("#img4").on('click', function() {
       $("#div4").fadeIn();
       $("#div1,#div2,#div3").fadeOut();
    });
});

Answer №2

Give this a shot.

Your jQuery library has been initialized, but the $ symbol is not included.

<script>
jQuery("#img1").on('click', function() {
   jQuery("#div1").fadeIn();
   jQuery("#div2,#div3,#div4").fadeOut();
});
jQuery("#img2").on('click', function() {
   jQuery("#div2").fadeIn();
   jQuery("#div1,#div3,#div4").fadeOut();
});
jQuery("#img3").on('click', function() {
   jQuery("#div3").fadeIn();
   jQuery("#div1,#div2,#div4").fadeOut();
});
jQuery("#img4").on('click', function() {
   jQuery("#div4").fadeIn();
   jQuery("#div1,#div2,#div3").fadeOut();
});
</script>

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

Instructions on transferring an image to a server. The image is located on the client side within an <img> tag

Looking for an effective way to upload an image when the type is “file”? The goal here is to send an image from an image tag to the server without converting it into base64 due to size constraints. <form id="form-url"> <image src ...

"Troubleshooting: Issues with the ng-hide directive in AngularJS

I am facing an issue with hiding a column in my table using ng-hide. The goal is to hide the column before the user logs in and then show it after they have logged in. However, I found that after applying the ng-hide property, the entire table gets hidden ...

Troubleshooting spacing problems in Angular Material tables

I'm attempting to utilize an Angular Material table in the following way: <div class="flex flex-col pb-4 bg-card rounded-2xl shadow overflow-hidden"> <table mat-table class="" [dataSource]="$candidates ...

Help needed with parsing nested JSON using the $.each function

Here is a JSON response sample that needs to be parsed in a more generic manner, rather than using transactionList.transaction[0]. "rateType": interestonly, "relationshipId": consumer, "sourceCode": null, "subType": null, "transactionList": { "transac ...

Remove a row from a table and implement a Bootstrap modal for confirmation

I am currently working on a task in my CodeIgniter framework project where I need to delete a row from a table of users. The desired functionality is to click the delete button, have a modal window appear asking the user for confirmation to delete the rec ...

Step-by-step guide: Uploading files with Ajax in Codeigniter

I am facing an issue with updating data and uploading an image when editing a row in my grid. Although the data is successfully updated, I am encountering difficulties in saving the image file to a folder. Here is what I have tried: While using AJAX, I ...

Can you explain the process of initiating a script?

Seeking Answers: 1) When it comes to initializing a script, is there specific code placement in the js file or do you need to create initialization code from scratch? 2) What sets jQuery apart from other scripts that require activation - why does jQuery. ...

Fluidity in CSS Video

I'm currently working on developing a dynamic video display component for my personal portfolio website. The main concept involves showcasing a mobile application video placed on top of a phone mockup within a designated container. My challenge lies ...

Using MVC3 to deserialize a JavaScript object in a controller

I'm struggling to pass a serialized JavaScript object to my controller and have the default model binder automatically deserialize it into my object. I can manually deserialize the value into my object without any issues, but I'm curious as to w ...

Is there a way to showcase the JSON data within a nested array using VueJS?

Here is my Vue.js code: <script> new Vue({ el: '#feed' , data: { data: [], }, mounted() { this.$nextTick(function() { var self = this; var id = window.location.href.split('=').pop(); ...

Reverting back to the specified CSS style

In my application, I have a common HTML component styled as follows: .box { min-width: 100px; padding: 20px 10px; } There are over 100 of these components and they each have a unique border style without a bottom border: .box:nth-child(1) { border ...

Creating personalized dots in the owl carousel

I have successfully added custom previous and next buttons to my carousel using Owl Carousel, but I am having trouble displaying the navigation dots. Can anyone help me identify where I might have made a mistake? // owl.carousel.css .owl-controls { ...

Applying the 'overflow: scroll' property creates a scroll bar that remains fixed and cannot be scrolled

Looking to showcase the seating arrangement in a cinema hall. If the seats occupy more than 50% of the page, I want a scroll bar to appear. Attempted using "overflow-scroll" without success. View result image <div class="w-50"> <div ...

Tips for creating a responsive H1 tag within the Avada WordPress theme by implementing CSS

One of my acquaintances recently upgraded his Avada WordPress theme to the latest version of WordPress without physically uploading any files. However, after this upgrade, he noticed that the page titles (H1) no longer appear responsive as they did before. ...

Zoom out the slider when scrolling

Take a look at this link and as you scroll down the page, notice how the image transitions to iPhone. Can anyone provide insight on how this effect is achieved? ...

Discovering the magic of activating a JavaScript function on jQuery hover

I need to call a JavaScript function when hovering over an li element. var Divhtml='<div>hover</div>'; $('li a').hover(function(){ $(this).html(Divhtml); //I want to trigger hovercall(); wh ...

Could someone please assist me with an issue I am experiencing with an AJAX GET request?

My code is not fetching any data for me. Below is the code snippet: <script type="text/javascript"> function matriculaFn(mat) { $.ajax({ method: 'GET', url:'My url API, async: true, crossDomain: false, contentType: 'application/j ...

What is the best way to align the checkbox and label in a React form?

I've been struggling to align the labels next to the checkboxes on this form. I'm currently utilizing React with React-Hook-Form for validation and state management (you can find the code on GitHub: https://github.com/cipdv/ciprmt-mern/blob/main/ ...

Using the typeahead feature to retrieve a value and then incorporating it into an ajax

Currently, I am utilizing the jQuery typeahead plugin for ajax search functionality. In the provided demo, all the data sources are linked to a json file and retrieved from there. However, in my scenario, I am using a php file as the data source. Within ...

Ensuring consistent width for two divs using CSS

https://i.stack.imgur.com/3n8La.png I am currently working on creating a responsive CSS layout for two div elements. The first div will contain the summary, while the second div will hold the detailed description. My challenge is to make sure that the seco ...