How can we handle multiple toggleclass in 1 div it gets so annoying when I click maximize button or close button the minimize function will fire too. How can we handle that?
How can we handle multiple toggleclass in 1 div it gets so annoying when I click maximize button or close button the minimize function will fire too. How can we handle that?
jQuery(($) => {
const $chatbox = $(".chatbox");
const $open = $(".open-chatbox");
const $minimize = $(".minimize-chatbox");
const $maximize = $(".maximize-chatbox");
const $close = $(".close-chatbox");
const $chatboxTextarea = $("textarea");
$open.on("click", function() {
const $showChatbox = $chatbox.removeClass("hide-chatbox");
console.log($showChatbox);
});
$minimize.on("click", function() {
const $minimizeChatbox = $chatbox.toggleClass("minimize");
console.log($minimizeChatbox);
});
let maximized = false;
$maximize.on("click", function() {
const $maximizeChatbox = $chatbox.toggleClass("maximize");
maximized = !maximized;
$chatboxTextarea.attr("rows", maximized ? 6 : null);
console.log($maximizeChatbox);
});
$close.on("click", function() {
const $hideChatbox = $chatbox.addClass("hide-chatbox");
console.log($hideChatbox);
});
});.body {
width: 100%;
position: relative;
}
.chatbox {
position: fixed;
height: 397px;
border-radius: 5px 5px 0 0;
z-index: 10000;
width: 325px;
bottom: -30px;
right: 30px;
}
.chatbox .card-header {
color: #303030;
border-bottom: solid 1px #8b8b8b4d;
font-weight: 500;
font-size: 16px;
padding: 10px 10px 5px 10px;
}
.chatbox .card-header span.icons {
float: right;
color: #BEC2C9;
}
.chatbox .card-header .icons i.material-icons {
font-size: 18px;
margin-right: 5px;
cursor: pointer;
}
.chatbox .card-body {
padding: 0 5px 0 5px;
}
.chatbox .card-footer {
border-top: solid 1px #8b8b8b4d !important;
margin: 0 !important;
}
.form-group.type-area {
display: flex;
margin: 0;
padding: 0;
}
.type-area textarea {
width: 300px;
border: none !important;
padding: 0 0 0 10px;
margin: 0;
}
.type-area .form-control:hover {
box-shadow: none;
}
.type-area button.btn.btn-link {
padding: 0;
margin: 0;
}
.chatbox.hide-chatbox {
display: none;
}
.chatbox.maximize {
width: 800px;
height: 527px;
}
.chatbox.minimize {
height: 40px;
}
.chatbox.maximize textarea {
width: 775px;
}
.chatbox.maximize .send {
margin-top: 60px;
}
.minimize .maximize-chatbox {
display: none;
}<script src=".5.2/js/bootstrap.min.js"></script>
<script src=".js/1.16.0/umd/popper.min.js"></script>
<script src=".3.1/jquery.min.js"></script>
<link href=".5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src=".3.1/jquery.min.js"></script>
<link href="+Icons"
rel="stylesheet">
<body>
<button type="button" rel="tooltip" title="Message" class="btn btn-primary btn-link btn-sm open-chatbox">
<i class="material-icons">chat_bubble</i>
</button>
<div class="card chatbox hide-chatbox">
<div class="card-header minimize-chatbox">
Featured
<span class="icons">
<i class="material-icons maximize-chatbox">web_asset</i>
<i class="material-icons close-chatbox">close</i>
</span>
</div>
<div class="card-body">
This is some text within a card body.
</div>
<div class="card-footer">
<form>
<div class="form-group type-area">
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Type a message..."></textarea>
<button type="button" class="btn btn-link"><i class="material-icons send">send</i></button>
</div>
</form>
</div>
</div>
</body>How can we handle multiple toggleclass in 1 div it gets so annoying when I click maximize button or close button the minimize function will fire too. How can we handle that?
How can we handle multiple toggleclass in 1 div it gets so annoying when I click maximize button or close button the minimize function will fire too. How can we handle that?
jQuery(($) => {
const $chatbox = $(".chatbox");
const $open = $(".open-chatbox");
const $minimize = $(".minimize-chatbox");
const $maximize = $(".maximize-chatbox");
const $close = $(".close-chatbox");
const $chatboxTextarea = $("textarea");
$open.on("click", function() {
const $showChatbox = $chatbox.removeClass("hide-chatbox");
console.log($showChatbox);
});
$minimize.on("click", function() {
const $minimizeChatbox = $chatbox.toggleClass("minimize");
console.log($minimizeChatbox);
});
let maximized = false;
$maximize.on("click", function() {
const $maximizeChatbox = $chatbox.toggleClass("maximize");
maximized = !maximized;
$chatboxTextarea.attr("rows", maximized ? 6 : null);
console.log($maximizeChatbox);
});
$close.on("click", function() {
const $hideChatbox = $chatbox.addClass("hide-chatbox");
console.log($hideChatbox);
});
});.body {
width: 100%;
position: relative;
}
.chatbox {
position: fixed;
height: 397px;
border-radius: 5px 5px 0 0;
z-index: 10000;
width: 325px;
bottom: -30px;
right: 30px;
}
.chatbox .card-header {
color: #303030;
border-bottom: solid 1px #8b8b8b4d;
font-weight: 500;
font-size: 16px;
padding: 10px 10px 5px 10px;
}
.chatbox .card-header span.icons {
float: right;
color: #BEC2C9;
}
.chatbox .card-header .icons i.material-icons {
font-size: 18px;
margin-right: 5px;
cursor: pointer;
}
.chatbox .card-body {
padding: 0 5px 0 5px;
}
.chatbox .card-footer {
border-top: solid 1px #8b8b8b4d !important;
margin: 0 !important;
}
.form-group.type-area {
display: flex;
margin: 0;
padding: 0;
}
.type-area textarea {
width: 300px;
border: none !important;
padding: 0 0 0 10px;
margin: 0;
}
.type-area .form-control:hover {
box-shadow: none;
}
.type-area button.btn.btn-link {
padding: 0;
margin: 0;
}
.chatbox.hide-chatbox {
display: none;
}
.chatbox.maximize {
width: 800px;
height: 527px;
}
.chatbox.minimize {
height: 40px;
}
.chatbox.maximize textarea {
width: 775px;
}
.chatbox.maximize .send {
margin-top: 60px;
}
.minimize .maximize-chatbox {
display: none;
}<script src="https://maxcdn.bootstrapcdn./bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn./bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis./icon?family=Material+Icons"
rel="stylesheet">
<body>
<button type="button" rel="tooltip" title="Message" class="btn btn-primary btn-link btn-sm open-chatbox">
<i class="material-icons">chat_bubble</i>
</button>
<div class="card chatbox hide-chatbox">
<div class="card-header minimize-chatbox">
Featured
<span class="icons">
<i class="material-icons maximize-chatbox">web_asset</i>
<i class="material-icons close-chatbox">close</i>
</span>
</div>
<div class="card-body">
This is some text within a card body.
</div>
<div class="card-footer">
<form>
<div class="form-group type-area">
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Type a message..."></textarea>
<button type="button" class="btn btn-link"><i class="material-icons send">send</i></button>
</div>
</form>
</div>
</div>
</body>-
just chain it
$maximize.on("click", function() { $chatbox.addClass("maximize").removeClass("minimize"); });– Daniel A. White Commented Aug 29, 2020 at 18:21 - still didn't work – frustrated-dev Commented Aug 29, 2020 at 18:25
- People could help better if you provide html code they can use to test your issue , not an image. Why not upload images of code/errors when asking a question?. It's not obvious from what is shown and from your description what the specific problem is. See also minimal reproducible example – charlietfl Commented Aug 29, 2020 at 18:41
3 Answers
Reset to default 4Take a look at snippet below:
UPDATE 1:
Also you do not need to know a class is exists in this situation, just remove the class, if it is exists, it'll be remove if it's not, nothing happening.
UPDATE 2:
According to your codes, you specify a minimize button but there is no problem to remove that.
If you have problem with toggleClass() you don't need to use it, just think about a workaround like using hasClass() instead. With this approach you can change text or icon of resize too.
(function ($) {
'use strict';
$(function () {
const $chatbox = $(".chatbox");
const $open = $(".open-chatbox");
const $maximize = $(".maximize-toggle-chatbox");
const $close = $(".close-chatbox");
function logClass(element) {
console.log(element.attr('class'));
}
// chatbox open button click event
$open.on("click", function() {
// if there is no selector for chatbox
if(!$(this).attr('data-for')) return;
const current_chatbox = $($(this).attr('data-for'));
// if there is no selector present with specific selector
if(!current_chatbox.length) return;
current_chatbox.removeClass("hide-chatbox");
// log classes of chatbox
logClass(current_chatbox);
});
// chatbox maximize button click event
$maximize.on("click", function() {
const current_chatbox = $(this).closest('.chatbox');
if(current_chatbox.hasClass('maximize')) {
current_chatbox.removeClass("maximize").addClass('minimize');
$(this).text('maximize chat');
} else {
current_chatbox.removeClass("minimize").addClass('maximize');
$(this).text('minimize chat');
}
// log classes of chatbox
logClass(current_chatbox);
});
// chatbox close button click event
$close.on("click", function() {
const current_chatbox = $(this).closest('.chatbox');
current_chatbox.addClass("hide-chatbox");
// log classes of chatbox
logClass(current_chatbox);
});
});
})(jQuery);.chatbox {
position: absolute;
top: 50%;
left: 50%;
display: block;
background-color: #ccc;
width: 70%;
height: 70%;
transform: translate(-50%, -50%);
}
.maximize {
width: 100%;
height: 100%;
}
.hide-chatbox {
display: none;
}<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="open-chatbox" type="button" data-for="#theChatbox">
open chat
</button>
<div class="chatbox hide-chatbox" id="theChatbox">
<button class="close-chatbox" type="button">
close chat
</button>
<button class="maximize-toggle-chatbox" type="button">
maximize chat
</button>
</div>From jQuery documentation You can toggle one or more classes by passing them in separated by spaces so you can just call .toggleClass("minimize maximize") and they'll flip automatically. Of course your initial state should be one of those already applied.
.toggleClass(className): One or more classes (separated by spaces) to be toggled for each element in the matched set.
There's also an overload that accepts an array of classes
In case one of the buttons triggers other click events, perhaps it Bubbles see stopPropagation or preventDefault for more info, the difference is that stopPropagation will still allow for the default event action to be executed
In your case you can use
$open.on("click", function(event) {
event.stopPropagation();
$chatbox.removeClass("hide-chatbox");
});
Use jquery hasClass
$maximize.on("click", function() {
if($(this).closest('.chatbox').hasClass('maximize')) {
// chatbox hasClass maxiremove it and add min
$(this).closest('.chatbox').removeClass("maximize").addClass('minimize');
$(this).text('maximize chat');
} else {
current_chatbox.removeClass("minimize").addClass('maximize');
$(this).text('minimize chat');
}
// log classes of chatbox
logClass(current_chatbox);
});