jQuery if/else statement to toggle content using multiple buttons
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();
);
);
That's right Andrei, initially I was going to use a carousal but I'm not displaying images, I'm displaying images/text in a container. Inter-changing- if the user is in the "Tasks" button section and click on either arrow, then the "Meeting" section content would show up and hide the Tasks section.
– Alexandra
Sep 12 '18 at 2:11
so you have not written any code for arrow. add it and just call respective btn i mean trigger your desire btn.
– Daniel Smith
Sep 12 '18 at 2:12
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>
Wowza! Yes, that is exactly what I was shooting for! Thanks so much! I will be studying your code all night! :) Looks like I need to work on .addClass and triggers!
– Alexandra
Sep 12 '18 at 2:51
$(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');
);
);
does this help?
– Daniel Smith
Sep 12 '18 at 2:26
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.
So you basically need a tab-like functionality (pressing a button shows content A and the other shows content B)? What does "inter-changing content" mean?
– Andrei Gheorghiu
Sep 12 '18 at 2:07