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

The failure of jQuery AJAX error callback to execute

I'm currently facing an issue with an AJAX call that I have in my code. Here's the code snippet: $.ajax({ type: "get", url: "xxx.xxx.xxx/xxx.js", dataType: 'jsonp', success: function(data) { ...

javascriptjqueryajaxjsonp

IE8 experiencing issues with displaying Recaptcha AJAX API widget

Struggling with getting the Recaptcha widget to show up in IE 8, even though it works fine in Firefox, Safari, and Chrome. I've set up a feedback form that loads via AJAX when a user clicks a link, and I'm using the Ajax API directly to place th ...

jqueryajaxrecaptcha

Utilize the DataTables plugin to arrange a column based on icons with hidden boolean values in rows

I am currently utilizing the DataTables plugin to enhance my HTML table. While I have managed to successfully implement most functionalities, I am facing a challenge with the boolean column. This particular column consists of icons representing X (value 0) ...

javascripthtmljquerydatatables

The Ajax Auto Complete function encounters an issue when attempting to assign a value to the TextBox

I have a Textbox that utilizes an Ajax Autocomplete function. The function is functioning correctly and retrieves values from the database, populating them in the TextBox as well. However, there is a button on the page that triggers a query, fetching som ...

javascriptc#jqueryasp.netajax

Struggling to align the header of a column to the center in a mat-table that is sortable?

I am working with a mat-table that has a sortable column similar to the example shown here, but I am having trouble centering the column headers using my CSS file. Interestingly enough, I am able to achieve this when making changes in the browser debugger! ...

htmlcssangular-materialmat-table

Steps to Show an Image When Hovering and Clicking on the Relevant Div

CSS: .imgECheck { position: absolute; top: 0; right: 5px; width: 15px; height: 15px; display: none; } .imgFCheck { position: absolute; top: 0; right: 5px; width: 15px; height: 15px; display: none; } Is ther ...

jqueryhtmlcss

How come I don't have to specify the relative path in my HTML file to include a JavaScript file when using Express JS?

I am currently in the process of building my very first project from scratch. As I was setting everything up, I ran into an issue with using relative paths to reference my javascript file in my index.html file. Strangely enough, simply referencing the scri ...

javascripthtmlnode.jsexpress

I am interested in utilizing css to establish an iframe as a background

Hello fellow programmers on stackoverflow, I am curious if it is feasible to utilize an iframe as a background using CSS? Allow me to elaborate: Currently, I have a div named "lead" on my website. Whenever this div is used in my HTML files, the image ...

jqueryhtmlcssiframe

When you apply margins in CSS and HTML, it can cause elements to break out of the row alignment

I'm struggling with my html code that contains elements arranged in rows: <div class = "row"> <div class="col-sm-3 cont-box"> <h1>Title1<h1> </div> <div class="col-sm9 cont-box"> <img src="onepic.jpeg" class=" ...

htmlcss

Creating Stunning CSS Animations for a Slider Using SVG

Looking for help to create an SVG CSS animation for a slider using a mockup image. The animation will feature a balloon with a number value that zooms in and out from left to right or right to left. Currently stuck at the starting point and unsure how to ...

javascripthtmlcsssvg

Achieve consistent heights for divs within table cells without the use of JavaScript

Is it possible to make two divs contained in table cells in a shared row both have the height of the taller div without using JavaScript? Take a look at this simplified example here: http://jsfiddle.net/Lem53dn7/1/ Check out the code snippet from the fidd ...

htmlcssdynamichtml-table

Conditional logic in Gravity Forms enhanced with Date Picker functionality

I've been faced with a challenge when it comes to gravity forms for quite some time now. I'm seeking a way to establish conditional logic based on the day selected by users. Each day of the week should have its own set of options, prioritizing th ...

phpjquerywordpress

Change the value of the material slide toggle according to the user's response to the JavaScript 'confirm' dialogue

I am currently working on implementing an Angular Material Slide Toggle feature. I want to display a confirmation message if the user tries to switch the toggle from true to false, ensuring they really intend to do this. If the user chooses to cancel, I&ap ...

javascripthtmlangularangular-materialslidetoggle

Deactivate a <tr> element if any of its <td> cells contain a value

In my table, there are various trs and tds with different element names. I need to determine if there is text in a specific field. If there is text, I want to disable or hide the entire tr to prevent user interaction. Unfortunately, I am unable to provide ...

javascriptjquery

Start the BrightCove video by clicking on the link

I successfully integrated a Brightcove video into my mobile site and now I want to trigger it to play when the user clicks a link. Is there a way to access the video and start playing it using JQuery? <div id="video_player"><!-- Brightcove playe ...

jquerybrightcove

jquery unable to retrieve element

I have implemented a piece of code that adds the 'nav-pills' class to an element with the class 'nav-tabs' when the window width is less than 768px. $(window).on('resize', function () { $('.nav-tabs').toggleClass(&a ...

javascriptjquery

The functionality of jQuery touch events on iOS devices is not functioning properly

I'm encountering issues with jQuery touch events on iOS devices. Here is my current script: $(document).ready(function(){ var iX = 0,iY = 0,fX = 0,fY = 0; document.addEventListener('touchstart', function(e) { ...

javascriptandroidjqueryiostouch

My goal is to develop a table that is both able to be resized and easily repositioned

I've been working on a project to develop an interactive table that can be manipulated, resized, and repositioned within a canvas. The code snippet below shows my attempt at creating this table on the canvas: var canvas = document.getElementById("dra ...

javascripthtmlcanvas

Internet Explorer 9 is not fully extending the width of the box for multiple select options

I am facing an issue with a multiple select input in Internet Explorer 9. The options are not utilizing the full width of the select box, despite having a min-width set on the select element. In Chrome and Firefox, the items fill up the available width pe ...

htmlcssinternet-explorerstyling

Is there a way to lead to a password-protected page without making it accessible through the URL?

I'm currently honing my skills in web development and embarking on a project to create an interactive puzzle website. The premise is simple - the homepage will feature just an answer input field where users can enter the correct solution to progress t ...

javascriptphphtml