I have a problem in carousel class in bootstrap. I have defined a button which is by default a pause button, then i use a javascript function on that button to control the carousel like when clicked, the icon should change to play and the carousel should stop the cycle, but .click(function) is not working when the button is clicked instead it is pausing the carousel when i position the mouse on the button.
please help me solve this problem.
$(document).ready(function(){
$("#mycarousel").carousel( { interval: 2000 } );
$("#carouselButton").click(function()
{
if ($("#carouselButton").children("span").hasClass('fa-pause'))
{
$("#mycarousel").carousel("pause");
$("#carouselButton").children("span").removeClass('fa-pause');
$("#carouselButton").children("span").addClass('fa-play');
}
else if ($("#carouselButton").children("span").hasClass('fa-play'))
{
$("#mycarousel").carousel("cycle");
$("#carouselButton").children("span").removeClass('fa-play');
$("#carouselButton").children("span").addClass('fa-pause');
}
});
});
Nice question. I couldn't get { pause:null } to work as you wanted either. But digging this more, I got a working solution...
the key is toggling data-interval attribute on the carousel div
but this doesn't get the loop started, to trigger the start... we either have to hover-on and hover-off manually... or automate it (which we did)
but since there is some lag for adding/removing this attribute by jQuery, we (hackish-ly) add a setTimeout to take care of this
Working snippet below:
$(document).ready(function() {
$('#playPause').click(function() {
if ($("#myCarousel").attr("data-interval")) {
$("#myCarousel").removeAttr("data-interval");
$(".carousel-item>.active").removeAttr("active");
setTimeout(function() {
$(".carousel-control-next").trigger('click');
$(".carousel-inner").trigger('mouseenter');
$("#myCarousel").trigger('mouseenter');
}, 500);
} else {
$("#myCarousel").attr("data-interval", "500");
setTimeout(function() {
$(".carousel-control-next").trigger('click');
$(".carousel-inner").trigger('mouseenter');
$("#myCarousel").trigger('mouseenter');
$("#myCarousel").trigger('mouseleave');
}, 1000);
}
});
// Enable Carousel Indicators
$(".item1").click(function() {
$("#myCarousel").carousel(0);
});
$(".item2").click(function() {
$("#myCarousel").carousel(1);
});
$(".item3").click(function() {
$("#myCarousel").carousel(2);
});
// Enable Carousel Controls
$(".carousel-control-prev").click(function() {
$("#myCarousel").carousel("prev");
});
$(".carousel-control-next").click(function() {
$("#myCarousel").carousel("next");
});
});
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="container mt-3">
<button type='button' id='playPause'>Play / Pause</button>
<!-- The carousel -->
<div id="myCarousel" class="carousel slide mt-4">
<!-- Indicators -->
<ul class="carousel-indicators">
<li class="item1 active"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://www.w3schools.com/bootstrap4/la.jpg" alt="Los Angeles" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap4/chicago.jpg" alt="Chicago" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="New York" width="1100" height="500">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#myCarousel">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#myCarousel">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
I believe you left uncommented div with the same id:
<div class="btn-group" id="carouselButton">
then your button with the same id just doesn't work:
<button class="btn btn-danger btn-sm" id="carouselButton">
I had the same problem. The code comes from Coursera, Front-End Web UI Frameworks and Tools: Bootstrap 4 Week 4, Exercise (Instructions): More Bootstrap and JQuery
Answer below works well and in JavaScript for a different taste
function buttonFlip() {
var parentButton = document.getElementById("carouselButton");
var childSpan = document.getElementById("carouselButton_span");
if (parentButton.contains(childSpan) && childSpan.classList.contains("fa-pause")) {
$("#mycarousel").carousel('pause');
childSpan.classList.remove("fa-pause");
childSpan.classList.add("fa-play");
}
else {
$("#mycarousel").carousel('cycle');
childSpan.classList.remove("fa-play");
childSpan.classList.add("fa-pause");
}
}
If this is the bootstrap course lesson 4, from coursera, I had the same issue.
Go to this part and change the ID in my case I put carousel-style as id. Then go to the stylesheet and change the #carouselButton to the id you named in the btn-group.
It should work after that.
P.S The teacher doesnt explain to you but also you need to change the play icon to "fas fa play" as a class
it should look like this.
div class="btn-group" id="carousel-style">
<button class="btn btn-light btn-sm" id="carouselButton">
<span class="fa fa-pause"></span>
</button>
</div>
The Javascript should look like this:
<script>
$(document).ready(function() {
$('#mycarousel').carousel({ interval: 2000 });
$("#carouselButton").click(function(){
if ($("#carouselButton").children("span").hasClass('fa fa-pause')) {
$("#mycarousel").carousel('pause');
$("#carouselButton").children("span").removeClass('fa fa-pause');
$("#carouselButton").children("span").addClass('fas fa-play');
}
else if ($("#carouselButton").children("span").hasClass('fas fa-play')){
$("#mycarousel").carousel('cycle');
$("#carouselButton").children("span").removeClass('fas fa-play');
$("#carouselButton").children("span").addClass('fa fa-pause');
}
});
}); </script>
Related
I have two containers, one is a page of link blocks and a have another container hidden. In the hidden container there is articles that link to the main pages link blocks. So user "clicks" LINK ONE in the main container which then hides the main container, shows the originally hidden container and ONLY displays the id article it is linked to. There is then a "back to library" button which will take you back to the main container and set everything back to square one. I have it working at the moment but I'm not sure if it is the right way to achieve this? I know there is no right or wrong and if it works, it works but just wondering for peace of mind. Thanks :)
CODEPEN: https://codepen.io/mDDDD/pen/ZEObRdR
HTML:
<div class="container--article-blocks" id="articleBlocks">
<div class="article-block">
<a class="show-article" href="#articleOne">LINK ONE</a>
</div>
<div class="article-block">
<a class="show-article" href="#articleTwo">LINK TWO</a>
</div>
<div class="article-block">
<a class="show-article" href="#articleThree">LINK THREE</a>
</div>
</div>
<!-- articles -->
<div class="container--articles" id="articles" style="display: none;">
back to Library
<div id="articleOne" class="article-block-articles">One</div>
<div id="articleTwo" class="article-block-articles">Two</div>
<div id="articleThree" class="article-block-articles">Three</div>
</div>
jQuery:
$('.show-article').on('click', function (e) {
e.preventDefault();
var id = $(this).attr('href');
$(id).show().siblings('div').hide();
$('#articleBlocks').fadeOut();
setTimeout(function () {
$('#articles').fadeIn();
}, 500);
});
$('.back-to-library').on('click', function (e) {
e.preventDefault();
$('#articles').fadeOut();
setTimeout(function () {
$('#articleBlocks').fadeIn();
}, 500);
});
Consider using the callback for .fadeOut() to then call .fadeIn(). Nothing wrong with that you did, this will just ensure the item is faded out before executing further code.
$(function() {
$('.show-article').on('click', function(e) {
e.preventDefault();
var id = $(this).attr('href');
$(id).show().siblings('div').hide();
$('#articleBlocks').fadeOut(500, function() {
$('#articles').fadeIn();
});
});
$('.back-to-library').on('click', function(e) {
e.preventDefault();
$('#articles').fadeOut(500, function() {
$('#articleBlocks').fadeIn();
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container--article-blocks" id="articleBlocks">
<div class="article-block">
<a class="show-article" href="#articleOne">LINK ONE</a>
</div>
<div class="article-block">
<a class="show-article" href="#articleTwo">LINK TWO</a>
</div>
<div class="article-block">
<a class="show-article" href="#articleThree">LINK THREE</a>
</div>
</div>
<!-- articles -->
<div class="container--articles" id="articles" style="display: none;">
back to Library
<div id="articleOne" class="article-block-articles">One</div>
<div id="articleTwo" class="article-block-articles">Two</div>
<div id="articleThree" class="article-block-articles">Three</div>
</div>
You can make the visibility: hidden; after an event!
Actual example
document.getElementById("XXX").style.visibility = "hidden";
But actually, your project is just fine!
For more info, go here https://www.w3schools.com/jsref/prop_style_visibility.asp
This explains the HTML DOM visibility property!
I'm learning jQuery on coursera now and following the code from the video, but it doesn't work:
the carousel elements should stop when press on button, which has "stop" symbol
of button should change to "play"-symbol
after pressing the button "play", it should start to play.
What i have: button doesn't change, it is "stop"-button, it just throws to another carousel-item instead of stopping carousel. The problem appears both in Chrome and in Firefox
What i've tried:
i tried to remove data-ride="carousel" after pressing the button (someone adviced on Coursera):
The data-ride="carousel" attribute is used to mark a carousel as animating starting at page load. It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel. Source: https://getbootstrap.com/docs/4.0/components/carousel/#via-data-attributes. So, for the div with id "my-carousel", you will need to remove the attribute data-ride="carousel" .
i also tried to add cycle and pause to #mycarousel $('#mycarousel').carousel({ interval: 2000,cycle: true, pause: "null" });, like another person adviced on Coursera:
I think it's the way carousel works by default. For the hovering problem I found that you can specify that you want no pause :
$('#mycarousel').carousel({ interval: 2000,
cycle: true,
pause: "null" });
i've also tried to see what's goind on on console, after clicking (thanks Danimal for that piece of advice!), but it's empty, nothing happens.
i've also tried to link to jquery.min.js instead of jquery.slim.min.js (thanks Alon Eitan and freedomn-m for a piece of advise!), but for now, nothing has changed.
i've also tried to move the whole code inside $(document).ready(function() {}); (thanks ADyson!)
So, it seems like the problem is that jQuery code is not visible at all - after commenting the whole code, nothing changes on the page, button acts the same.
There are also a lot of open issues on course's forum, so it seems like it's not only my problem. I couldn't find any information on the Internet which would help to solve this issue.
$(document).ready(function() {
$('#mycarousel').carousel({
interval: 2000,
cycle: true,
pause: "null"
});
$("#carouselButton").click(function() {
if ($("#carouselButton").children("span").hasClass('fa-pause')) {
$("#mycarousel").carousel('pause');
$("#carouselButton").children("span").removeClass('fa-pause');
$("#carouselButton").children("span").addClass('fa-play');
$('#carouselButton').attr('data-ride', 'carousel');
} else if ($("#carouselButton").children("span").hasClass('fa-play')) {
$("#mycarousel").carousel('cycle');
$("#carouselButton").children("span").removeClass('fa-play');
$("#carouselButton").children("span").addClass('fa-pause');
$('#carouselButton').removeAttr('data-ride');
}
});
});
.carousel {
background: #512DA8;
}
.carousel-item {
height: 100px;
}
.carousel-item img {
position: absolute;
top: 0;
left: 0;
min-height: 200px;
}
#carouselButton {
right: 0;
position: absolute;
bottom: 0;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row row-content">
<div class="col">
<div id="mycarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<h2>Uthappizza</h2>
<!-- some code here -->
</div>
<div class="carousel-item">
<h2>About Us</h2>
<!-- some code here -->
</div>
<div class="carousel-item">
<h2>Great Buffet</h2>
<!-- some code here -->
</div>
</div>
<ol class="carousel-indicators">
<li data-target="#mycarousel" data-slide-to="0" class="active"></li>
<li data-target="#mycarousel" data-slide-to="1"></li>
<li data-target="#mycarousel" data-slide-to="2"></li>
</ol>
<a class="carousel-control-prev" href="#mycarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#mycarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
<button class="btn btn-danger btn-sm" id="carouselButton">
<span id="carousel-button-icon" class="fa fa-pause"></span>
</button>
</div>
</div>
</div>
<!-- scripts before closing body tag -->
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
If you use your browser's element inspector, you can see that the total space occupied by the > button of the carousel overlays your custom "pause" button (it has a lot of padding) and has a higher z-index, so your button is never even receiving the click event,. You could verify it by adding some console logging or using the debugger.
You can resolve this by giving the pause button a higher z-index (z-index of the > button is 1, so anything higher than that will work), so that it is considered to be "above" the > button in the page's stacking context.
#carouselButton {
right: 0;
position: absolute;
bottom: 0;
z-index: 2; //set z-index
}
I'm trying to make a box with a title and 2 arrows left and right of the title. When you click on either arrow, the box should fade out and the next one should fade in. I have another one like this on my page with 2 option (send and go back) and that one works fine, but for some reason it breaks when I have 3 options. I suspect it's my jQuery code that breaks when adding a third option.
My JSFiddle (minimal CSS to avoid confusion, the problem isn't there)
$('#go2').click(function(e) {
$('.box1, .box3').fadeOut('fast', function() {
$('.box2').fadeIn('slow');
});
});
$('#go3').click(function(e) {
$('.box2, .box1').fadeOut('fast', function() {
$('.box3').fadeIn('slow');
});
});
$('#go1').click(function(e) {
$('.box2, .box3').fadeOut('fast', function() {
$('.box1').fadeIn('slow');
});
});
The IDs must be unique (refer to id="go2").
The jQuery library must be included before the other libs.
You can simplify everything using a unique handler:
$('.box1, .box2, .box3').on('click', function(e) {
var isArrowRight = $(e.target).is('.right');
var isLeftArrow = $(e.target).is('.left');
if (!(isArrowRight || isLeftArrow)) {
return; // do nothing if you don't click the left/right arrow...
}
var nextEle = (isArrowRight) ? $(this).next('[class^=box]') : $(this).prev('[class^=box]');
if (nextEle.length == 0) {
nextEle = (isArrowRight) ? $('.box1') : $('.box3');
}
$('.box1:visible, .box2:visible, .box3:visible').fadeOut('fast', function(){
nextEle.fadeIn('slow');
});
});
i {
display: inline;
}
h1 {
display: inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap..css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/components/icon.min.css">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/semantic.min.js"></script>
<div class="box1">
<div class="boxTitle">
<i id="go3" class="icon angle left"></i>
<h1>Box 1</h1>
<i id="go22" class="icon angle right"></i>
</div>
<div class="boxField1">
Boxfield 1
</div>
</div>
<div class="box2" style="display: none">
<div class="boxTitle">
<i id="1" class="icon angle left"></i>
<h1>Box 2</h1>
<i id="3" class="icon angle right"></i>
</div>
<div class="boxField2">
Boxfield 2
</div>
</div>
<div class="box3" style="display: none">
<div class="boxTitle">
<i id="go2" class="icon angle left"></i>
<h1>Box 3</h1>
<i id="go1" class="icon angle right"></i>
</div>
<div class="boxField3">
Boxfield 3
</div>
</div>
Sorry but looking your jsfiddle file I see 2 problems:
you use the same id for more html tag, it's not possible try using class.
On the box2 you use id="1" and id="3" but on js you use go1, go2, go3.
I have a carousel with images inside a modal window. I want the images to slide back and forth when I press the left/right arrow keys on the keyboard. According to the bootstrap carousel documentation the data-keyboard attribute default value is true, but nothing happens when I press the arrow keys! So I tried putting the attribute in the code and still nothing happens when I press left/right arrow keys.
Question - Should the pics slide back and forth automatically with a left/right keyboard press? If yes, then I have something messed up, if no, do I need some JS carousel event captured and then slide manually with js/jquery?
Here is my code!
<div class="modal" id="profileImageModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">#*<span aria-hidden="true">×</span>*#<i class="fa fa-flag-o" aria-hidden="true"></i>
</button>
<h4 class="modal-title">Image Removal</h4>
</div>
<div class="modal-body" style="text-align: center;">
<div id="carousel-example-generic" data-interval="false" data-keyboard="true" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
#for (int i = 0; i
< Model.YogaProfileImages.Count(); i++) { var profileImageId=# Model.YogaProfileImages.ElementAt(i).YogaProfileImageId; <li data-target="#carousel-example-generic" data-slide-to="#i" class="#(ViewBag.SelectedImageId == profileImageId ? "
active " : " ")">
</li>
}
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
#for (int i = 0; i
< Model.YogaProfileImages.Count(); i++) { var profileImageId=# Model.YogaProfileImages.ElementAt(i).YogaProfileImageId; <div id=#profileImageId class="item #(ViewBag.SelectedImageId == profileImageId ? " active " : " ")"
data-profileId="#Model.Id">
<img style="display: block; margin: auto; border-radius: 6px;" src="data:image/jpg;base64, #(Html.Raw(Convert.ToBase64String(Model.YogaProfileImages.ElementAt(i).CroppedImage)))" alt="profile image">
</div>
}
</div>
</div>
</div>
<div class="modal-footer" style="text-align: center; border-top: none;">
<input id="deleteModalWarningClose" type="button" class="btn btn-lg btn-primary" value="Close" />
</div>
</div>
</div>
</div>
Please make your code example work to get a better answer. But upto now it seems like this could help you:
$(document).keydown(function(e) {
if (e.keyCode === 37) {
// Previous
$(".carousel-control.left").click();
return false;
}
if (e.keyCode === 39) {
// Next
$(".carousel-control.right").click();
return false;
}
});
I would use some jquery event listenner such as .on('keyup', somefunction()) see documentation here and in this function if right arrow was pressed I would increment an index that would "lead" to the image I would want my carousel to show. The same thing applies to left arrow being pressed but in this situation I would decrease the index. If I didn't get your problem correctly let me know.
For me this worked =>
<script>
$(".carousel").carousel({
interval: 6000,
keyboard: true
});
</script>
But it only worked when i have added left & right control arrows on the image and pressed one of the arrows at least once. After that i could use the left and right arrows on the keyboard to slide the images.
I have tried many ways but still not working...
click the submit button & expand button(tab) to display the chatbot and hide the tab
click the minimize button(chatbot) to hide the chatbot and display the tab
1) addClass/RemoveClass
default.htm
<!-- ------- button ------- -->
<div class="ask-button-container">
<button id="submit" class="btnSubmit">Ask</button>
</div>
<!-- ------- tab ------- -->
<div id="tab{{__SELF__.id}}" name="{{__SELF__.id}}" class="my-tab">
<div id="tab-minimize">
<div id="tab-label"></div>
<div id="tab-expand{{__SELF__.id}}" class="tab-expand tab-btn"></div>
<div id="tab-close{{__SELF__.id}}" class="tab-close tab-btn"></div>
</div>
</div>
<!-- ------- chatbot ------- -->
<div id="chatbot-window-wrapper{{__SELF__.id}}" class="cb-window hidden" style="position: fixed;">
<div id="control-bar">
<div id="chatbot-minimize{{__SELF__.id}}" class="minus pull-right chatbot-btn"><span class="glyphicon glyphicon-minus-sign"></div>
</div>
<iframe id="chatbot-window" name="chatbot-window" scroll="" width="100%" height="100%" frameborder="2" src="{{ 'page1'|page }}"></iframe>
</div>
JS
$(function(){
$(".tab-close").click(function() {
$(this).closest(".my-tab").addClass("hidden"); //working
});
$(".tab-expand").click(function() {
var chatbot = $(this).closest(".cb-window");
chatbot.removeClass("hidden");
$(this).closest(".my-tab").addClass("hidden"); //working
});
$(".btnSubmit").click(function() {
var chatbot = $(this).closest(".cb-window");
chatbot.removeClass("hidden");
$(this).closest(".my-tab").addClass("hidden");
});
$(".minus").click(function() {
var chatbot = $(this).closest(".cb-window");
chatbot.addClass("hidden");
$(this).closest(".my-tab").removeClass("hidden");
});
});
2) .css
$(this).closest(".cb-window").css("visibility", "visible");
Can someone please show me how to do it? Thank you.
or any other ways using jquery? .show/.hide , .toggle?
The problem was with your way of reaching the proper element and your understanding on closest option of jquery.
As per definition - The closest() method returns the first ancestor of the selected element. An ancestor is a parent, grandparent,
great-grandparent, and so on.
When you say closest on btnSubmit click event, the .cb-window was never its ancestor so $(this).closest('.cb-window') would basically fail. You need to traverse back to btnSubmit's parent who will be sibling of .cb-window and then you can easily get that element. Below is how you can achieve it. Also, you do not need multiple $(function(){ which is equivalent to $(document).ready and only one is sufficient.
$(function() {
$(".btnSubmit").click(function() {
$(this).closest(".ask-button-container").siblings('.cb-window').removeClass("hidden");
//closest ancestor would be .ask-button-container and its sibling is .cb-window
$(this).closest(".my-tab").addClass("hidden");
//did not find .my-tab element in your `html`
});
$(".minus").click(function() {
$(this).closest('.cb-window').addClass("hidden");
$(this).closest(".my-tab").removeClass("hidden");
});
});
.hidden {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="ask-button-container">
<button id="submit" class="btnSubmit">Ask</button>
</div>
<div id="chatbot-window-wrapper{{__SELF__.id}}" class="cb-window hidden" style="position: fixed;">
<div id="control-bar">
<div id="chatbot-minimize{{__SELF__.id}}" class="minus pull-right chatbot-btn"><span class="glyphicon glyphicon-minus-sign"></div>
</div>
<iframe id="chatbot-window" name="chatbot-window" scroll="" width="100%" height="100%" frameborder="2" src="{{ 'page1'|page }}"></iframe>
</div>
When we click or do operation on an element we can add or remove class and you can try like this.
$('#elm').hover(
function(){ $(this).addClass('hover') },
function(){ $(this).removeClass('hover') }
)
the problem that you don't target the element you want in a right way .. you need to use
$(function(){
$(".tab-close").click(function() {
$(this).closest(".my-tab").addClass("hidden"); //working
});
$(".tab-expand").click(function() {
var chatbot = $(this).closest('.my-tab').next(".cb-window");
chatbot.removeClass("hidden");
$(this).closest(".my-tab").addClass("hidden"); //working
});
$(".btnSubmit").click(function() {
var chatbot = $(this).closest('div').next().next(".cb-window");
chatbot.removeClass("hidden");
$(this).closest('div').next(".my-tab").addClass("hidden");
});
$(".minus").click(function() {
var chatbot = $(this).closest(".cb-window");
chatbot.addClass("hidden");
chatbot.prev(".my-tab").removeClass("hidden");
});
});
.hidden{
display : none;
}
.minus{
padding : 5px;
background : red;
color: #fff;
text-align : center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- ------- button ------- -->
<div class="ask-button-container">
<button id="submit" class="btnSubmit">Ask</button>
</div>
<!-- ------- tab ------- -->
<div id="tab{{__SELF__.id}}" name="{{__SELF__.id}}" class="my-tab">
<div id="tab-minimize">
<div id="tab-label"></div>
<div id="tab-expand{{__SELF__.id}}" class="tab-expand tab-btn"></div>
<div id="tab-close{{__SELF__.id}}" class="tab-close tab-btn"></div>
</div>
</div>
<!-- ------- chatbot ------- -->
<div id="chatbot-window-wrapper{{__SELF__.id}}" class="cb-window hidden" style="position: fixed;">
<div id="control-bar">
<div id="chatbot-minimize{{__SELF__.id}}" class="minus pull-right chatbot-btn"><span class="glyphicon glyphicon-minus-sign">-</span></div>
</div>
<iframe id="chatbot-window" name="chatbot-window" scroll="" width="100%" height="100%" frameborder="2" src="{{ 'page1'|page }}"></iframe>
</div>