You should add those classes initially to the HTML and show the div and let the script take over from there
<a href="#">
<div style="display: inline-block;" class="showSingle greenactive"
target="01">Selection1</div>
</a>
<div id="div01" class="targetDiv">
Target01 Content
</div>
Logic of answer is 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>So I have this script which shows/hide a div upon selection:
$('.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>Right now by default it doesn’t show any div.
It shows only when you click on one of the links.
How do I make so that by default the div01 would be selected and shown + my CSS applied as well?
Any help would be appreciated.
It doesnt work because jQuery is not included.
Got it, fixed. Working now.
Thanks! I knew there was a small thing that’s missing. Thanks again!
Thanks! I appreciate your tip. Will know next time.