Using JQuery to automatically set the default selection when toggling the visibility of a div

I currently have a script that toggles the visibility of a div when selected:

$('.showSingle').click(function () {

    $('.targetDiv').hide();
    $('.showSingle').removeClass('greenactive');
    $(this).addClass("greenactive")
    $('#div' + $(this).attr('target')).show();
});
.greenactive {
    background-color: green;  border-radius: 25px; padding: 10px; color: #fff;  font-size: 14px;   color: #;
     
}

.showSingle {

 background-color: #ffffff  border-radius: 25px; padding: 10px; color: #;  font-size: 14px;   color: #; 
}

.showSingle:hover {
 background-color: #e4e6e8;  border-radius: 25px; padding: 10px; color: #535a60;  font-size: 14px;   color: #; 
}
<a href="#"><div style="display: inline-block;" class="showSingle" target="01">Selection1</div></a>
 <a href="#"><div style="display: inline-block;" class="showSingle" target="02">Selection2</div></a>
<a href="#"><div style="display: inline-block;" class="showSingle" target="03">Selection3</div></a>

<div id="div01" class="targetDiv" style="display:none">
Target01 Content
</div>
<div id="div02" class="targetDiv" style="display:none">
Target02 Content
</div>
<div id="div03" class="targetDiv" style="display:none">
Target03 Content
</div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Currently, no div is shown by default.

The divs are only displayed upon clicking on one of the links.

How can I set it so that div01 is automatically selected and shown with my CSS styles applied?

Any assistance would be greatly appreciated.

htmljquerycss

Answer №1

It is recommended to include those classes in the initial HTML code and display the div, allowing the script to take control from that point on.

<a href="#">
  <div style="display: inline-block;" class="showSingle greenactive" 
  target="01">Selection1</div>
</a>
<div id="div01" class="targetDiv">
  Target01 Content
</div>

Answer №2

The logic behind the answer can be found in the comment included in the html.

$('.showSingle').click(function () {

    $('.targetDiv').hide();
    $('.showSingle').removeClass('greenactive');
    $(this).addClass("greenactive")
    $('#div' + $(this).attr('target')).show();
});
<!DOCTYPE html>
<html>
<head>
<title>Answer</title>
<style>
.greenactive {
    background-color: green;  border-radius: 25px; padding: 10px; color: #fff;  font-size: 14px;   color: #;
     
}

.showSingle {

 background-color: #ffffff  border-radius: 25px; padding: 10px; color: #;  font-size: 14px;   color: #; 
}

.showSingle:hover {
 background-color: #e4e6e8;  border-radius: 25px; padding: 10px; color: #535a60;  font-size: 14px;   color: #; 
}
</style>
</head>
<body>
<a href="#"><div style="display: inline-block;" class="showSingle" target="01">Selection1</div></a>
 <a href="#"><div style="display: inline-block;" class="showSingle" target="02">Selection2</div></a>
<a href="#"><div style="display: inline-block;" class="showSingle" target="03">Selection3</div></a>

<!--if you remove the display:none from first tiem as done below it would show as defualt.--->

<div id="div01" class="targetDiv" style="">
Target01 Content
</div>
<div id="div02" class="targetDiv" style="display:none">
Target02 Content
</div>
<div id="div03" class="targetDiv" style="display:none">
Target03 Content
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>

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

Bootstrap 5 dual carousel focus

I have implemented a combo carousel that serves as a timeline slider and displays 14 dates. Along with thumbnails, I am also using dates for navigation. To handle the large number of dates, I need to display them in separate rows, but only show one row at ...

javascriptjquerytwitter-bootstrapbootstrap-5

What is the best way to modify the size of a canvas element while maintaining effectiveness?

I've encountered an issue while using Canvas to create a pie chart with chart.js. Despite adjusting the dimensions of the canvas element, it continues to take up the entire page. <canvas id="myChart" height ="200" width="200"></can ...

javascripthtmlcanvaschart.jsdimensions

Encountering a PHP issue while attempting to embed Google Trends into an HTML element

I am encountering an issue while attempting to assign the html property of a jquery element to embed Google Trends. <!DOCTYPE html> <html> <head> <title>Titlw</title> </head> <body> <div class="hide ...

phphtmljqueryajaxgoogle-trends

Tips for implementing AJAX in the menu bar using PrimeFaces

Hey there, I was wondering something. Let's say I have a navigation bar like the one below: Navigation Bar Is there a way to use ajax or any other method so that when I click on a menu item or submenu in the navigation bar, the name of the menu item ...

jqueryajaxjsf-2primefaces

Show angular variable data in a table based on their index

I have an array of angular variables with values like [ 170, 1, 130, 3, 134, 4.... and so on]. I would like to present these values in a table format where the even positioned values are shown in one column and the odd positioned values in another column. ...

javascripthtmlangularjs

Using NodeJS to Send JSON Data via HTTP POST Request

Issue with Sending JSON Data via Http Post in NodeJS const http = require('http'); const fs = require('fs'); var options = { hostname: 'www.postcatcher.in', port: 80, path: '/catchers/5531b7faacde130300002495&apo ...

javascriptjqueryajaxjsonnode.js

Tips for effectively displaying jQuery Ajax data within a PHP MySQL query

After writing <form id="postform" class="postform"> into a MYSQL_QUERY result loop, I want to implement a comment system for my article. However, the issue arises when a comment is posted - it displays in all <div class="post_comment"></div& ...

phpmysqljquery

Saving sortable portlet items to a database using JQuery AJAX

I've searched through numerous resources to find a solution to my problem, but none of them have been successful. Here is the code I am working with: http://plnkr.co/edit/pcfz33lzHz4wdehjGEuQ I am trying to utilize AJAX to save the order of two port ...

jqueryajaxhtmlportletjquery-ui-sortable

Utilizing a Stylesheet for a Single Element

Is there a way to create a footer and include it using the PHP include function from an external file, but ensure that the stylesheet within it only affects the footer and not the entire page? I typically link stylesheets in the head tag, which applies t ...

htmlcss

If the navigation menu contains sub-menus, it should slide to the left

I am currently working on developing a navigation menu with four levels of depth. The menu displays three levels at a time, and when the user reaches the fourth level, the first level should move to the left to make room for the second, third, and fourth l ...

jqueryhtmlcssmenunavigation

`The height attribute of the textarea element is not being accurately adjusted`

When I tried to match the width(178px) and height(178px) of my table to the width and height of a text area upon clicking a button, I encountered an issue. While setting the width works perfectly fine, the height is being set to only 17px. It seems like ...

javascripthtmlcss

Rounded Corners on an HTML5 Canvas Triangle

Hi there, I'm relatively new to working with HTML5 Canvas and I'm currently attempting to create a triangle with rounded corners. So far, I've experimented with: ctx.lineJoin = "round"; ctx.lineWidth = 20; However, I haven't been suc ...

javascripthtmlcanvas

How can you easily center content vertically on a web page?

There has been plenty of back-and-forth regarding this issue, with proposed solutions ranging from pure CSS to pure HTML. Some can get quite complex, involving deeply nested divs and intricate CSS rules. I'm looking for a simple and uncomplicated answ ...

htmlcss

The browser does not support the display of Spanish special characters

I am working on a website and need to incorporate support for the Spanish language. I have prepared an XML file with both English and Spanish text. The XML file is being read based on the user's selection of language from a dropdown menu. Everything s ...

htmlxmlutf-8metaiso-8859-1

Displaying iFrame Border in React Native WebView

When attempting to dynamically add YouTube videos to my React Native app, I decided to utilize a combination of WebView and iFrame due to the incompatibility of the current react-native-youtube component with RN 16+. Although this solution works, the ifram ...

cssiframeyoutubereact-native

Search timeout restriction

I have a function that makes a request to the server to retrieve data. Here is the code for it: export default class StatusChecker { constructor() { if (gon.search && gon.search.searched) { this.final_load(); } else { this.make_req ...

javascriptjquerytypescript

Determine whether the textfield is a number or not upon losing focus

I'm seeking advice on implementing a feature using jQuery and JavaScript. I want to create a text field that, when something is inputted, will automatically add .00 at the end if it's only a number. However, if someone inputs something like 2.00, ...

javascriptjqueryhtmlfocusout

Is it possible to implement a custom icon for pagination in Material UI?

Can I use a custom icon for pagination in material ui? Find more information on Material UI Pagination in the official documentation here, and check out the CodeSandbox Demo here I am interested in changing the default left and right chevron icons for na ...

cssreactjsmaterial-ui

Modify x and y axes in highcharts for stacked columns

Can anyone assist me in finding charts similar to the one shown below? I am interested in utilizing the stacked column charts provided by the highcharts library. However, I need to modify the presentation of the data values as demonstrated in the image. I ...

javascriptjquerygraphchartshighcharts

Displaying a DIV inside an embedded DIV when selecting an option in HTML by utilizing JavaScript

My goal is to create a page where users initiate a questionnaire by clicking START in a web form - this action will open the DIV for the first question. As users answer each question (with yes/no choices), it will either display a specific DIV related to ...

javascriptjqueryhtml