jQuery if/else statement to toggle content using multiple buttons

I have a container and (2) bootstrap buttons inside it. When you click either button an image and text shows, the other button does the same feature but with it's respected image/text.

My client is asking for arrow buttons on the sides of the container and if the user clicks one of the arrow buttons, the content inter-changes based off where the button left off. I've got my actual buttons working fine interchanging the content, I'm just having a hard time where to start when incorporating the arrow buttons. I know the simplest way is an if/else statement but I'm having trouble incorporating that into my working jQuery.

Few minor problems:

I have the "Meeting" button set to start as 'active' with the color purple but for some reason it is not working.

With my jQuery, I've tried to make it less redundant by attempting to put two classes in one (' ', ' ') before the hide element but it does not work, it shows all content(both images and text).

I hope this makes sense. Any direction is appreciated!

Since I have quite a bit of HTML and CSS code, you can view it all on my codepen here: https://codepen.io/dec23rd1986/pen/PdEoZa?editors=1010

My jQuery:

$(document).ready(function()
$('.feature_tasks').hide();
$('.tasks_img').hide();
$('#meeting_button').click (function()
$('.feature_tasks').hide();
$('.tasks_img').hide();
$('.feature_info').fadeIn(3000);
$('.meeting_img').show();

);

$('#tasks_button').click (function()
$('.feature_info').hide();
$('.meeting_img').hide();
$('.feature_tasks').fadeIn(3000);
$('.tasks_img').show();
);
);


3 Answers
3

I think you want to achieve this,

demo

$(document).ready(function()
$('.feature_tasks').hide();
$('.tasks_img').hide();

var option_selected = "meeting";

$('#meeting_button').click(function()
$(this).addClass("active");
$('#tasks_button').removeClass("active");
$('.feature_tasks').hide();
$('.tasks_img').hide();
$('.feature_info').fadeIn(3000);
$('.meeting_img').show();

);

$('#tasks_button').click(function()
$(this).addClass("active");
$('#meeting_button').removeClass("active");
$('.feature_info').hide();
$('.meeting_img').hide();
$('.feature_tasks').fadeIn(3000);
$('.tasks_img').show();
);

$('.carousel-control-prev, .carousel-control-next').click(function()
if(option_selected == "meeting")
$('#tasks_button').trigger('click');
option_selected = "tasks";

else
$('#meeting_button').trigger('click');
option_selected = "meeting";

);

);

body,html
background-color: #fff;
height: 100%;
margin: 0;
padding: 0;
position: relative;
overflow-y: auto;
overflow-x: hidden;
font-family: 'Montserrat', sans-serif;


h1
text-align: center;


#meeting_button
margin-top: 20px;

#tasks_button
margin-top: 20px;
margin-bottom: 0px;


.jumbo_features
background-color: #eae8f5;
background-size: cover;
border-radius: 30px;
width: 55%;


.btn
background-color: #eae8f5;
color: black;
border-radius: 30px;
padding: 7px 10px;
width: 175px;
border-color: #D34ED5;


.btn:focus, .btn:hover, .btn:active, .active
background-color: #D34ED5 !important;
color: #fff;
box-shadow: none;


.feature_info
font-size: 12px;
margin-top: 1rem;
margin-right: .5rem;
margin-left: .5rem;


.feature_tasks
font-size: 12px;
margin-right: .5rem;
margin-left: .5rem;


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<br>
<div class="container-fluid jumbo_features">
<div class="row">
<div class="col-md-6">
<img src="https://image.ibb.co/ijvTfU/feature_meeting.png" class="meeting_img">

<img src="https://image.ibb.co/hZNxPp/feature_tasks.png" class="tasks_img"></div>

<div class="col-md-6">
<button type="button" class="btn active" aria-pressed="true" id="meeting_button">Meeting</button>
<button type="button" class="btn" aria-pressed="true" id="tasks_button">Tasks</button>

<!--Meeting-->
<p class="feature_info"><b>Schedules Meetings:</b><br> Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p><br>
<p class="feature_info"><b>Attends Meetings:</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p><br>
<p class="feature_info "><b>Takes meeting notes:</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
<!--Tasks-->
<p class="feature_tasks"><b>Example One</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p><br>
<p class="feature_tasks"><b>Example Two</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p><br>
<p class="feature_tasks"><b>Example Three</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p><br>

</div>
</div>
</div>

<br>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#" role="button" data-slide="prev"><img src="https://image.ibb.co/fkqbjp/previous_arrow.png"></a>
<a class="carousel-control-next" href="#" role="button" data-slide="next"><img src="https://image.ibb.co/kRFFc9/next_arrow.png"></a>
</div>

$(document).ready(function()

$('.feature_tasks').hide();
$('.tasks_img').hide();
$('#meeting_button').click (function()
$('.feature_tasks').hide();
$('.tasks_img').hide();
$('.feature_info').fadeIn(3000);
$('.meeting_img').show();
);
$('#tasks_button').click (function()
$('.feature_info').hide();
$('.meeting_img').hide();
$('.feature_tasks').fadeIn(3000);
$('.tasks_img').show();
);

$('.meeting_img').click (function()
$('#meeting_button').trigger('click');
);

$('.tasks_img').click (function()
$('#tasks_button').trigger('click');
);

);


This is how I'd do it: I'd only keep two classes: tasks and meetings. This way I can show/hide all meetings and tasks with one command.
And the js would be something along these lines:

tasks

meetings

meetings

tasks

$('.meetings', '.jumbo_features')[isMeetings ? 'show' : 'hide']();


Demo:

$('button', '.jumbo_features').on('click', function()
let isMeetings = $(this).is('#meeting_button');
// show/hide all meetings and tasks:
$('.meetings', '.jumbo_features')[isMeetings ? 'show' : 'hide']();
$('.tasks', '.jumbo_features')[isMeetings ? 'hide' : 'show']();

// remove active from all buttons:
$('button', '.jumbo_features').removeClass('active').attr('aria-pressed', 'false');
// add active based on which was pressed
$(this).addClass('active').attr('aria-pressed', 'true');
)
$('#meeting_button').trigger('click');

body,
html
background-color: #fff;
height: 100%;
margin: 0;
padding: 0;
position: relative;
overflow-y: auto;
overflow-x: hidden;
font-family: 'Montserrat', sans-serif;


h1
text-align: center;


#meeting_button
margin-top: 20px;


#tasks_button
margin-top: 20px;
margin-bottom: 0px;


.jumbo_features
background-color: #eae8f5;
background-size: cover;
border-radius: 30px;
width: 55%;
margin-top: 30px;


button.btn
background-color: #eae8f5;
color: black;
border-radius: 30px;
padding: 7px 10px;
width: 175px;
border-color: #D34ED5;


button.btn:focus,
button.btn:hover,
button.btn:active,
button.btn.active
background-color: #D34ED5 !important;
color: #fff;
box-shadow: none;
outline: none;


.jumbo_features p
font-size: 12px;
margin-top: 1rem;
margin-right: .5rem;
margin-left: .5rem;


<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.9/js/mdb.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>


<div class="container jumbo_features">
<div class="row">
<div class="col-md-6 text-center">
<img src="https://image.ibb.co/ijvTfU/feature_meeting.png" class="meetings">
<img src="https://image.ibb.co/hZNxPp/feature_tasks.png" class="tasks"></div>
<div class="col-md-6">
<button type="button" class="btn active waves-effect waves-light" aria-pressed="true" id="meeting_button">Meeting</button>
<button type="button" class="btn waves-effect waves-light" aria-pressed="false" id="tasks_button">Tasks</button>
<!--Meeting-->
<p class="meetings"><b>Schedules Meetings:</b><br> Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
<p class="meetings"><b>Attends Meetings:</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
<p class="meetings"><b>Takes meeting notes:</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
<!--Tasks-->
<p class="tasks"><b>Example One</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
<p class="tasks"><b>Example Two</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
<p class="tasks"><b>Example Three</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
</div>
</div>
</div>

An even simpler solution for these cases is to add/remove a single class on the parent ('toggled' in the example below) and use CSS to show/hide (or animate) everything:

Relevant code:

$('.jumbo_features')[
$(this).is('#meeting_button') ?
'removeClass' :
'addClass'
]('toggled');


.tasks, .toggled .meetings display: none
.toggled .tasks, .meetings display:block


See it working:

$('button', '.jumbo_features').on('click', function()
$('.jumbo_features')[$(this).is('#meeting_button') ? 'removeClass' : 'addClass']('toggled');

$('button', '.jumbo_features').removeClass('active').attr('aria-pressed', 'false');
$(this).addClass('active').attr('aria-pressed', 'true');
)

body,
html
background-color: #fff;
height: 100%;
margin: 0;
padding: 0;
position: relative;
overflow-y: auto;
overflow-x: hidden;
font-family: 'Montserrat', sans-serif;


h1
text-align: center;


.jumbo_features button
margin-top: 20px;


.jumbo_features
background-color: #eae8f5;
background-size: cover;
border-radius: 30px;
width: 55%;
margin-top: 30px;


button.btn
background-color: #eae8f5;
color: black;
border-radius: 30px;
padding: 7px 10px;
width: 175px;
border-color: #D34ED5;


button.btn:focus,
button.btn:hover,
button.btn:active,
button.btn.active
background-color: #D34ED5 !important;
color: #fff;
box-shadow: none;
outline: none;


.jumbo_features p
font-size: 12px;
margin-top: 1rem;
margin-right: .5rem;
margin-left: .5rem;


.tasks, .toggled .meetings display: none
.toggled .tasks, .meetings display:block

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.9/js/mdb.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>


<div class="container jumbo_features">
<div class="row">
<div class="col-md-6 text-center">
<img src="https://image.ibb.co/ijvTfU/feature_meeting.png" class="meetings">
<img src="https://image.ibb.co/hZNxPp/feature_tasks.png" class="tasks"></div>
<div class="col-md-6">
<button type="button" class="btn active waves-effect waves-light" aria-pressed="true" id="meeting_button">Meeting</button>
<button type="button" class="btn waves-effect waves-light" aria-pressed="false" id="tasks_button">Tasks</button>
<!--Meeting-->
<p class="meetings"><b>Schedules Meetings:</b><br> Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
<p class="meetings"><b>Attends Meetings:</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
<p class="meetings"><b>Takes meeting notes:</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
<!--Tasks-->
<p class="tasks"><b>Example One</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
<p class="tasks"><b>Example Two</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
<p class="tasks"><b>Example Three</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
</div>
</div>
</div>

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.