Method 1:
One simple way can be, to auto click on the first button AFTER the click event binding. Like this:
$(".btn").first().click()
.first() selects the first button
.click() triggers the same event that you have bound in .on
$(function() {
$(".btn").on("click", function() {
//hide all sections
$(".content-section").hide();
//show the section depending on which button was clicked
$("#" + $(this).attr("data-section")).show();
}).first().click();
});.content-section {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group btn-group-lg">
<button type="button" data-section="section1" class="btn btn-primary segmentedButton ">Section1</button>
<button type="button" data-section="section2" class="btn btn-primary segmentedButton">Section2</button>
<button type="button" data-section="section3" class="btn btn-primary segmentedButton">Section3</button>
</div>
<div class="content-section" id="section1">
<h1> Section 1 </h1>
<p>Section 1 Content goes here</p>
</div>
<div class="content-section" id="section2">
<h1> Section 2 </h1>
<p>Section 2 Content goes here</p>
</div>
<div class="content-section" id="section3">
<h1> Section 3 </h1>
<p>Section 3 Content goes here</p>
</div>Method 2:
Another way can be: Add an active class to show the selected tab content. On click just toggle the active class to show/hide the content of the tab. You can add active class to any tab content that you want to show as default in the HTML, to start with. (Here I have added active class in the 1st tab content)
$(function() {
$(".btn").on("click", function() {
//hide all sections
$(".content-section").removeClass('active');
//show the section depending on which button was clicked
$("#" + $(this).attr("data-section")).addClass('active');
});
});.content-section {
display: none;
}
.content-section.active {
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group btn-group-lg">
<button type="button" data-section="section1" class="btn btn-primary segmentedButton ">Section1</button>
<button type="button" data-section="section2" class="btn btn-primary segmentedButton">Section2</button>
<button type="button" data-section="section3" class="btn btn-primary segmentedButton">Section3</button>
</div>
<div class="content-section active" id="section1">
<h1> Section 1 </h1>
<p>Section 1 Content goes here</p>
</div>
<div class="content-section" id="section2">
<h1> Section 2 </h1>
<p>Section 2 Content goes here</p>
</div>
<div class="content-section" id="section3">
<h1> Section 3 </h1>
<p>Section 3 Content goes here</p>
</div>CLICK HERE to find out more related problems solutions.