When the image is clicked, show the content of the div

I am completely new to Javascript and I have a question regarding how to achieve a specific functionality. I have 3 image buttons and I want to create a scenario where clicking on each button displays a different div while hiding the previous one. Essentially, I want it to function like tabs on a website - when you click on one tab, its content is displayed, and when you click on another tab, the previous content disappears and the new content is shown in its place.

Any tips or advice on how to implement this would be highly appreciated.

javascriptjqueryhtmlcss

Answer №1

Here is an easy solution to toggle the visibility of related div elements.

View the solution by following this link: http://jsfiddle.net/silpa/rny2wb5z/34/

Sample HTML code:

 <img src="https://i.sstatic.net/JHoSf.gif?s=128&g=1" data-id="divId1"/> 
 <img src="https://i.sstatic.net/JHoSf.gif?s=128&g=1" data-id="divId2"/> 
 <img src="https://i.sstatic.net/JHoSf.gif?s=128&g=1" data-id="divId3"/>
 <div id="divId1" class="hideDivs">Div 1</div>
 <div id="divId2" class="hideDivs">Div 2</div>
 <div id="divId3" class="hideDivs">Div 3</div>

jQuery code snippet:

 $("img").on('click',function(){
   var targetDiv = $(this).attr('data-id');
   $('.hideDivs').hide();
   $('#'+targetDiv).show();
 });

CSS styles:

 .hideDivs{
    display:none; 
 }

Answer №2

Give each div a unique ID and use a JavaScript function to control their visibility. You can trigger this function by clicking on an image button.

JavaScript:

function switchPage(pageId) {
    //hide all pages
    document.getElementsByClassName("selectablePages").style.display = 'none';
    //display the selected page
    document.getElementById(pageId).style.display = 'block';
}

HTML:

<img src="p1.gif" alt="page1" onclick="switchPage('page1')" />
<img src="p2.gif" alt="page2" onclick="switchPage('page2')" />
<img src="p3.gif" alt="page3" onclick="switchPage('page3')" />

<div id="page1" class="selectablePage">Lorem ipsum dolor sit amet</div>
<div id="page2" class="selectablePage">consectetur adipiscing elit</div>
<div id="page3" class="selectablePage">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>

Answer №3

Take a look at the Code Sample

<img src="https://i.sstatic.net/JHoSf.gif?s=128&g=1" id="pic1"/>
<div id="box1" class="hiddenBox">Box 1</div>
<img src="https://i.sstatic.net/JHoSf.gif?s=128&g=1" id="pic2"/>
<div id="box2" class="hiddenBox">Box 2</div>
<img src="https://i.sstatic.net/JHoSf.gif?s=128&g=1" id="pic3"/>
<div id="box3" class="hiddenBox">Box 3</div>

//Using jQuery

$("#pic1").click(function(){
    $("#box2").hide();
    $("#box3").hide();    
    $("#box1").show();
});
$("#pic2").click(function(){
    $("#box1").hide();
    $("#box3").hide();    
    $("#box2").show();
});
$("#pic3").click(function(){
    $("#box1").hide();
    $("#box2").hide();    
    $("#box3").show();
});

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

Emulate an AngularJS ng-click action

My website has HTML code with three buttons: <button ng-click='showStats(player.data,0)'>Death Match</button> <button ng-click='showStats(player.data,1)'>Champions Rumble</button> <button ng-click='sho ...

javascriptjqueryangularjs

Why is my jQuery drag and drop function restricting me from dragging outside of a scrollable container?

Currently, I am facing a challenge with a table containing drag and drop functionalities within a div that has its overflow property set to "auto". This configuration enables me to hide a portion of the schedule and only displays a scroll bar at the bott ...

jquerydrag-and-dropscroll

Creating dynamic height based on width using JavaScript

I'm trying to make a rectangle responsive based on the width of the window. This is my current logic: aspectRatio = 16 / 9 win = { width: window.innerWidth, height: window.innerHeight, } get browser() { const width = this.win.width - 250 ...

javascripthtmlcsscanvaskonvajs

Cannot get Favicon.ico to update after downloading

Recently, I started playing around with html and CSS. I decided to customize my website by using an icon as my favicon. I successfully converted a .png file to a .ico using a generator, downloaded it, and implemented it on my site. However, now I'm fa ...

htmlcss

Managing Flicker Effect by Implementing Theme Switching and Using Local Storage in Next.js with Ant Design

I've been working on a new feature to switch themes (light/dark) dynamically in a Next.js application using Ant Design. Successfully integrating the theme switch with a toggle switch and useState hook, I'm faced with the challenge of storing the ...

javascriptreactjsnext.jsantdserver-side-rendering

What could be causing my jQuery function to not correctly update the class as specified?

Presented is a snippet of script that I execute at a specific moment by echoing it in PHP: echo "<script>$('.incorrect-guesses div:nth-child(2)').removeClass('empty-guess').addClass('incorrect-guess').text('2' ...

phpjavascriptjqueryhtmlcss

axios in node does not support relative URLs

When running my node server, the code below works just fine axios.get('http://localhost:8080/myPath') // works Unfortunately, using relative paths does not work axios.get('/myPath') // doesn't work This is the error I encounter ...

javascriptnode.jshttpurlrelative-path

"Utilizing Webpack dev server with React to display directory listing only when the application is in operation

When I try to access my project through webpack-dev-server, all that displays in the browser is the directory listing. Even though I can navigate to the files and view them, the actual application doesn't seem to be running. On the other hand, when I ...

javascriptreactjsnpmwebpackwebpack-dev-server

Retrieving JSON Data from an API with JavaScript/jQuery

Having some trouble with JSON parsing using jQuery and JavaScript. I'm trying to fetch weather information from the open weather simplest API, but for some reason it's not working. When I hardcode the JSON data into a file or my script, everythin ...

javascriptjqueryjson

Position the angular material dialog at the center of the mat-drawer-content

My goal is to center the Angular material dialog component within the mat-drawer-content component instead of it taking up the full screen as it normally does. I currently have a mat-drawer that is always open on the left side, with the main content of th ...

cssangularangular-material

Angular: merging object values into a single string by looping over them

i am dealing with the following data : "commercialRanges": [ { "rangeId": "700", "rangeName": "POSTPAID" }, { "rangeId": "500", "rangeName": "PREPAID" }, ] In my view, I am aiming to display the ...

htmlangularangular2-directivesngfor

Adding the Facebook like button to a React component with a custom URL

After referring to the documentation provided at https://developers.facebook.com/docs/plugins/like-button/, I successfully implemented a like button in my react web app. I followed the instructions and generated the necessary script and div elements. The ...

javascriptreactjsreact-routerfacebook-like

React JS FormControl not functioning properly to toggle checkbox within a modal window

Upon editing a specific resource, a modal pops up to record the changes and update the application. Extracted from the homepage rfc const [flags,setFlags] = React.useState({}) . . . flags[object1]={flag1: true, flag2:false}; flags[object2]={flag1: true, f ...

javascriptreactjs

Issues with CSS selectors in Internet Explorer causing problems with Selenium Webdriver C#

When automating a website with Selenium C#, I encountered a NoSuchElementException when trying to click an element using a CSS selector. However, the issue was resolved when using xpath instead. Can someone shed light on why this discrepancy between CSS an ...

cssseleniumxpathselenium-webdrivercss-selectors

Scrolling in a smooth horizontal motion

I need to create a horizontal website where each section takes up the entire screen. I have added anchors to navigate between sections using links, but I am struggling to make a JavaScript code work for smooth horizontal scrolling. Here is my HTML: & ...

javascriptjqueryhtmlcss

PHP encountered an issue when retrieving a value from a URL and passing it to a JavaScript variable

How can I pass a PHP variable from the URL using $_REQUEST to JavaScript in order to send it through Ajax? Here is the code snippet at the top of my page: <?php include_once('../php/connection.php'); include_once('../php/getDiagnosi ...

javascriptphpjquerypdo

Childs - A jQuery Stride

I am trying to figure out how to modify a specific child element within an HTML structure. Specifically, I want to target the first anchor tag within a list item of an unordered list. Here is what I have attempted so far: [HTML AND JQUERY] <body> ...

javascriptjqueryhtmlcss

Modify the CSS of one div when hovering over a separate div

I've been working on a simple JavaScript drop-down menu, and it's been functioning correctly except for one issue. When I move the mouse out of the div that shows the drop-down menu, it loses its background color. I want the link to remain active ...

javascriptcsshtmlonmouseout

JQuery slideshow code is unable to operate when multiple slideshow instances are present

I have been trying to enhance my slideshow code to display multiple slideshows simultaneously. The current code successfully selects and adds/removes the active class for two slide shows, but it fails to smoothly transition between slides after one loop. ...

javascriptjqueryhtml

What is the best way to show <input type='text'> without generating a textbox using jQuery?

When a user enters a comment in the text box and hits enter, it is automatically displayed in the 'comment section'. Upon hitting submit, the following code is executed: var comment = $("#commentBox").val(); var commentSection = $("#commentSecti ...

javascriptjqueryhtml