jQuery btn to close div if made active - javascript

I need the .menu button to close the .slides container if it was opened by one of the [name=toggler] radio buttons.
So if the state of the .slide is show and the .menu button is clicked, hide .slides.
.slides can only be opened by the [name=toggler] radio buttons, but are made hidden by clicking the .menu button.
$('.menu-btn').click(function() {
$(".menu").toggle("slide");
});
$(function() {
$("[name=toggler]").click(function() {
$('.slide').hide();
$("#blk-" + $(this).val()).show();
});
});
.flex,
.btn-wrap {
display: flex;
}
.menu,
.slide {
display: none;
}
.btn,
.menu-btn {
padding: 20px;
border: 1px solid silver;
cursor: pointer
}
.slide {
height: 50px;
width: 50px;
border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex">
Menu
<div class="menu">
<div class="btn-wrap">
<label class="btn"><input type="radio" name="toggler" value="1"/>Slide 1</label>
<label class="btn"><input type="radio" name="toggler" value="2"/>Slide 2</label>
</div>
</div>
</div>
<div class="slides">
<div class="slide" id="blk-1">
Slide 1
</div>
<div class="slide" id="blk-2">
Slide 2
</div>
</div>

Just have to do a check on .menu-btn click, whether the .slide div is visible or not. If visible hide it also uncheck the radio button.
Here is the codepen: https://codepen.io/johnsackson/pen/NMNmyb
$(".menu-btn").click(function() {
$(".menu").toggle("slide");
if($(".slide").is(":visible")) {
$(".slide").hide();
$("[name=toggler]").prop("checked", false);
}
});
$(function() {
$("[name=toggler]").click(function() {
$(".slide").hide();
$("#blk-" + $(this).val()).show();
});
});
Hope this helps.

Related

JS add active hover item list

I have list item
.thumbs {display: flex;}
.thumbs .item {width: 150px; height: 150px; margin-right: 10px; border: 1px solid black}
.thumbs .item.active {border: 1px solid red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="thumbs">
<div class="item active">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
How to hover .thumbs .item add active to item:hover & clear active item(1).
And if not hover any item stick active item last hover.
same as:
hover item(2): add active item(2) - Clear active item(1) && If don't hover any item or hover out .thumbs element stick active item(2).
I user js hover active but not hover clear all active.
$(document).ready(function() {
$(".thumbs .item").hover(
function() {
$(this).addClass('active');
}, function() {
$( this ).removeClass('active');
}
);
});
Don't forgot before add active class remove all the class and then add it to current element:
$(".item").removeClass('active');
$(this).addClass('active');
And for last item use mouseout event for .thumbs. You need to keep last Element when an element unhovered (lastElemtHoverd = $(this);)
$(document).ready(function () {
var lastElemtHoverd;
$(".thumbs").mouseout(function () {
lastElemtHoverd.addClass('active');
});
$(".thumbs .item").hover(
function () {
$(".item").removeClass('active');
$(this).addClass('active');
}, function () {
$(this).removeClass('active');
lastElemtHoverd = $(this);
}
);
});
.thumbs {
display: flex;
}
.thumbs .item {
width: 150px;
height: 150px;
margin-right: 10px;
border: 1px solid black
}
.thumbs .item.active {
border: 1px solid red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="thumbs">
<div class="item active">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>

How can I show specific texts inside a div by the click of a button?

I have a small text translated in 3 languages. I am looking to show the first text in English, and above the text to show two buttons, one that says French and one that says Italian. And I want once you click on French, to display the text in French, and the same with Italian. This means that I will have three separate divs, one for English, one for French and one for Italian. I only want to show one of them on the page, depending on which button I click. How can I do that? Thanks
All you need to do is create a relation between button and your desired div, and then show the related div only on click and hide the others, in my code you can increase and decrease the div's, no need to touch the jQuery or CSS code, just add or remove div's from HTML
$(document).ready(function(){
$('.btnWrapper button').click(function(){
$('.btnWrapper button').removeClass('active');
$(this).addClass('active');
var realtion = $(this).data('relation');
$('.translatedText>div').removeClass('active');
$('.translatedText').find('#' + realtion).addClass('active');
});
});
.btnWrapper button.active {
background-color: red;
color: #fff;
}
.translatedText > div {
display: none;
}
.translatedText > div.active {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btnWrapper">
<button class="active" data-relation="eng">English</button>
<button data-relation="fre">French</button>
<button data-relation="ita">Italian</button>
</div>
<div class="translatedText">
<div id="eng" class="active">
I am English's Div
</div>
<div id="fre">
I am French's Div
</div>
<div id="ita">
I am Italian's Div
</div>
</div>
$(function() {
$('[data-lang="en"]').addClass('active');
$('.flag').on('click', function() {
$('[data-lang]').removeClass('active');
$('[data-lang="' + $(this).data('lang') + '"]').addClass('active');
});
});
.flag.active {
background-color: yellow;
}
.text {
display: none;
}
.text.active {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button data-lang="en" class="flag">English</button>
<button data-lang="fr" class="flag">Français</button>
<button data-lang="it" class="flag">Italiano</button>
<div data-lang="en" class="text">My text in English</div>
<div data-lang="fr" class="text">Mon texte en français</div>
<div data-lang="it" class="text">Il mio testo in italiano</div>
document.querySelector(".btn-eng").addEventListener('click', function () {
document.querySelector(".eng").classList.add("active");
document.querySelector(".french").classList.remove("active");
document.querySelector(".italian").classList.remove("active");
});
document.querySelector(".btn-french").addEventListener('click', function () {
document.querySelector(".french").classList.add("active");
document.querySelector(".eng").classList.remove("active");
document.querySelector(".italian").classList.remove("active");
});
document.querySelector(".btn-italian").addEventListener('click', function () {
document.querySelector(".italian").classList.add("active");
document.querySelector(".eng").classList.remove("active");
document.querySelector(".french").classList.remove("active");
});
*{
font-size: 1rem;
}
.container {
margin: auto;
height: 100px;
width: 250px;
}
.flex {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100%;
width: 100%;
}
.eng,
.french,
.italian {
display: none;
}
.active {
display: block;
}
<div class="container">
<div class="flex">
<div class="section">
<p class="eng active">Hello Developers out there!</p>
<p class="french">Bonjour les développeurs là-bas!</p>
<p class="italian">Ciao sviluppatori là fuori!</p>
</div>
<div class="button">
<button class="btn-eng">English</button>
<button class="btn-french">French</button>
<button class="btn-italian">Italian</button>
</div>
</div>
</div>

How can I toggle between adding and removing the same class in jQuery with an onClick function

I am trying to toggle between adding and removing a class to hide / show a popup window.
I am going for something that resembles a computer screen with window browsers so when an icon is clicked a window pops up and so does a tab at the bottom of the navigation bar that you can click to toggle between opening and closing the window.
Here is an example of what I have so far: http://jsfiddle.net/fjmnqx7e/288/
I got the pop-up to close when clicking on the "toggle button" however I can't get it to re-open.
Thank you in advance!
$('.icon3').on("click", function() {
$(".windowframe, .window-content, .navbartabs").addClass("active");
$(".navbartabs").css("display", "inline-block");
});
$(".close").on("click", function() {
$(".windowframe, .window-content").removeClass("active");
$(".navbartabs").css("display", "none");
});
$(".navbartabs").on("click", function() {
$(".navbartabs").css("display", "inline-block");
});
iframe {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: none;
overflow: hidden;
display: flex;
}
.windowframe {
/*Hides pop-up when there is no "active" class*/
visibility: hidden;
position: absolute;
background: #ffffff;
border: 3px solid #666666;
width: 50%;
height: 50%;
left: 25%;
}
.windowframe.active {
/*displays pop-up when "active" class is present*/
visibility: visible;
text-align: center;
}
.window-content {
/*Hides pop-up content when there is no "active" class */
visibility: hidden;
}
.window-content.active {
/*Shows pop-up content when "active" class is present */
visibility: visible;
}
.navbartabs {
display: none;
margin-left: 70px;
height: 20px;
width: 100px;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="draggable" class="icon3">
<div class="icons">
<img src="http://paynomind.us/wp-content/uploads/2018/06/hat-icon-03.png">
</div>
<div class="iconTXT"> hats </div>
</div>
<div class="windowframe">
<button class="close"> close </button>
<div class="window-content">
<iframe src="paynomind.us"></iframe>
</div>
</div>
<div id="nav bar">
<button class="navbartabs close"> toggle button </button>
<div>
No need to use css. You could use jquery toggleClass().
If you want to toggle class then you could use toggleClass()
$(".windowframe, .window-content, .navbartabs").toggleClass('active')
Working code
$('.icon3').on("click", function() {
$(".windowframe, .window-content, .navbartabs").toggleClass("active");
$(".navbartabs").css("display", "inline-block");
});
$(".close").on("click", function() {
$(".windowframe, .window-content").toggleClass("active");
$(".navbartabs").css("display", "none");
});
$(".navbartabs").on("click", function() {
$(".navbartabs").css("display", "inline-block");
});
iframe {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: none;
overflow: hidden;
display: flex;
}
.windowframe {
/*Hides pop-up when there is no "active" class*/
visibility: hidden;
position: absolute;
background: #ffffff;
border: 3px solid #666666;
width: 50%;
height: 50%;
left: 25%;
}
.windowframe.active {
/*displays pop-up when "active" class is present*/
visibility: visible;
text-align: center;
}
.window-content {
/*Hides pop-up content when there is no "active" class */
visibility: hidden;
}
.window-content.active {
/*Shows pop-up content when "active" class is present */
visibility: visible;
}
.navbartabs {
display: none;
margin-left: 70px;
height: 20px;
width: 100px;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="draggable" class="icon3">
<div class="icons">
<img src="http://paynomind.us/wp-content/uploads/2018/06/hat-icon-03.png">
</div>
<div class="iconTXT"> hats </div>
</div>
<div class="windowframe">
<button class="close"> close </button>
<div class="window-content">
<iframe src="paynomind.us"></iframe>
</div>
</div>
<div id="nav bar">
<button class="navbartabs close"> toggle button </button>
<div>
You need to use toggleClass function to add/remove active class.
Here is your code.
$('.icon3').on("click", function() {
$(".windowframe, .window-content, .navbartabs").addClass("active");
$(".navbartabs").css("display", "inline-block");
});
$(".close").on("click", function() {
$(".windowframe, .window-content").removeClass("active");
$(".navbartabs").css("display", "none");
});
$(".navbartabs").on("click", function() {
$(".windowframe, .window-content").toggleClass('active');
});
Fiddle
Try This Code
Using toggel Button you can show hide popup
$('.icon3').on("click", function() {
$(".windowframe, .window-content, .navbartabs").addClass("active");
$(".navbartabs").css("display", "inline-block");
});
$(".close").on("click", function() {
if ($(".window-content").hasClass('active')) {
$(".windowframe, .window-content").removeClass("active");
$(".navbartabs").css("display", "none");
} else {
$(".windowframe, .window-content, .navbartabs").addClass("active");
$(".navbartabs").css("display", "inline-block");
}
});
$(".navbartabs").on("click", function() {
$(".navbartabs").css("display", "inline-block");
});
iframe {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: none;
overflow: hidden;
display: flex;
}
.windowframe {
/*Hides pop-up when there is no "active" class*/
visibility: hidden;
position: absolute;
background: #ffffff;
border: 3px solid #666666;
width: 50%;
height: 50%;
left: 25%;
}
.windowframe.active {
/*displays pop-up when "active" class is present*/
visibility: visible;
text-align: center;
}
.window-content {
/*Hides pop-up content when there is no "active" class */
visibility: hidden;
}
.window-content.active {
/*Shows pop-up content when "active" class is present */
visibility: visible;
}
.navbartabs {
display: none;
margin-left: 70px;
height: 20px;
width: 100px;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="draggable" class="icon3">
<div class="icons">
<img src="http://paynomind.us/wp-content/uploads/2018/06/hat-icon-03.png">
</div>
<div class="iconTXT"> hats </div>
</div>
<div class="windowframe">
<button class="close"> close </button>
<div class="window-content">
<iframe src="paynomind.us"></iframe>
</div>
</div>
<div id="nav bar">
<button class="navbartabs close"> toggle button </button>
<div>
OR Use toggleClass
$(".windowframe, .window-content").toggleClass('active');
When you click the Toggle Button, make sure if it has the class close. Depending on this class you can then show/hide the windowframe
Plus, you must make sure that the class button triggered when hiding both toggle and windowframe must be .windowframe .close and not .close only, because then when you click the Toggle Button that has the class .close it will trigger this function and hide both Windowframe and Toggle Button
$('.icon3').on("click", function(){
showWindowframe(1);
showToggleBtn(1);
});
$(".windowframe .close").on("click", function(){
showWindowframe(0);
showToggleBtn(0);
});
$(".navbartabs").on("click", function(){
if ($(this).hasClass("close")) {
$(this).removeClass("close");
showWindowframe(0);
}
else {
$(this).addClass("close")
showWindowframe(1);
}
});
function showWindowframe(status) {
if (status) {
$(".windowframe, .window-content").addClass("active");
}
else {
$(".windowframe, .window-content").removeClass("active");
}
}
function showToggleBtn(status) {
if (status) {
$(".navbartabs").css("display", "inline-block").addClass("close");
}
else {
$(".navbartabs").css("display","none");
}
}
iframe {
width: 100%;
height: 100%;
padding:0;
margin: 0;
border: none;
overflow: hidden;
display: flex;
}
.windowframe{
/*Hides pop-up when there is no "active" class*/
visibility:hidden;
position:absolute;
background:#ffffff;
border:3px solid #666666;
width:50%;
height:50%;
left:25%;
}
.windowframe.active{
/*displays pop-up when "active" class is present*/
visibility:visible;
text-align:center;
}
.window-content {
/*Hides pop-up content when there is no "active" class */
visibility:hidden;
}
.window-content.active {
/*Shows pop-up content when "active" class is present */
visibility:visible;
}
.navbartabs {
display:none;
margin-left:70px;
height:20px;
width:100px;
float:right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="draggable" class ="icon3">
<div class="icons">
<img src="http://paynomind.us/wp-content/uploads/2018/06/hat-icon-03.png"></div>
<div class="iconTXT"> hats </div>
</div>
<div class="windowframe">
<button class="close"> close </button>
<div class="window-content">
<iframe src="paynomind.us"></iframe>
</div>
</div>
<div id="nav bar">
<button class="navbartabs close"> toggle button </button>
<div>

show/hide div if opened by radio selection

I have the .menu-btn successfully toggling the .menu, but:
Step 1: If a radio is selected, the .slides div should open,
Step 2: If the .menu-btn is pressed when the .slides div is open,
the .slides container should close.
Each .slide shows/hides with the radio selection using the code below, but I need to be able to animate the .slides container to follow the steps above.
$(function() {
$("[name=toggler]").click(function() {
$(".slide").hide();
$("#blk-" + $(this).val()).show();
});
$(".menu-btn").click(function() {
$(".menu").animate({
width: 'toggle',
ease: 'easeOutExpo'
}, 250);
});
$(function() {
$("[name=toggler]").click(function() {
$(".slide").hide();
$("#blk-" + $(this).val()).show();
});
});
.menu,
.slide {
display: none;
}
.flex,
.btn-wrap {
display: flex;
}
.menu {
height: 50px;
}
.btn,
.menu-btn {
padding: 20px;
border: 1px solid silver;
cursor: pointer
}
.slides {
border: 2px solid green;
}
.slide {
height: 50px;
width: 50px;
border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex">
Menu
<div class="menu">
<div class="btn-wrap">
<label class="btn"><input type="radio" name="toggler" value="1"/>Slide 1</label>
<label class="btn"><input type="radio" name="toggler" value="2"/>Slide 2</label>
</div>
</div>
</div>
<div class="slides">
<div class="slide" id="blk-1">
Slide 1
</div>
<div class="slide" id="blk-2">
Slide 2
</div>
</div>
You might have to save your actions in an variables/object.
Check here: https://codepen.io/johnsackson/pen/RyGdRp
var slideDetail = {
isRadioGroupOpen: false,
isSlideOpen: false,
value: ""
};
$(".menu-btn").click(function() {
$(".menu").toggle("slide");
if(slideDetail.isRadioGroupOpen) {
$(".slide").hide();
} else if(slideDetail.value!=="") {
$(slideDetail.value).show();
}
slideDetail.isRadioGroupOpen = !slideDetail.isRadioGroupOpen
});
$(function() {
$("[name=toggler]").click(function() {
$(".slide").hide();
var value = "#blk-" + $(this).val();
$(value).show();
slideDetail.isSlideOpen = !slideDetail.isSlideOpen;
slideDetail.value = value;
});
});
I hope this is what you are looking for.
If I understand correctly, you can use a flag to determine wether or not the menu is open.
var menu_open = false;
$(".menu-btn").click(function() {
$(".menu").animate({
width: 'toggle',
ease: 'easeOutExpo'
}, 250);
if ( menu_open ) {
$(".slide").hide();
}
});
$(function() {
$("[name=toggler]").click(function() {
$(".slide").hide();
$("#blk-" + $(this).val()).show();
menu_open = true;
});
});
.menu,
.slide {
display: none;
}
.flex,
.btn-wrap {
display: flex;
}
.menu {
height: 50px;
}
.btn,
.menu-btn {
padding: 20px;
border: 1px solid silver;
cursor: pointer
}
.slides {
border: 2px solid green;
}
.slide {
height: 50px;
width: 50px;
border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex">
Menu
<div class="menu">
<div class="btn-wrap">
<label class="btn"><input type="radio" name="toggler" value="1"/>Slide 1</label>
<label class="btn"><input type="radio" name="toggler" value="2"/>Slide 2</label>
</div>
</div>
</div>
<div class="slides">
<div class="slide" id="blk-1">
Slide 1
</div>
<div class="slide" id="blk-2">
Slide 2
</div>
</div>

Adding div when clicking on anchor and removing div when clicking either outside of it or on a different anchor

I have two anchor tags that both display two different divs when clicked on but I only want to display one div at a time. I also want to hide the div that is displayed when clicking outside of it. I am almost done but when i click on the first anchor and then on the second both divs are displayed (I want one at a time).
Here is my code:
//Display and hide div number 1
$("a.number_1").on("click", function(event) {
event.preventDefault();
$(".display_div_1").toggle();
event.stopPropagation();
});
$(".display_div_1").on("click", function(event) {
event.preventDefault();
event.stopPropagation();
});
$(".body").on("click", function(event) {
event.preventDefault();
$(".display_div_1").hide();
});
//Display and hide div number 2
$("a.number_2").on("click", function(event) {
event.preventDefault();
$(".display_div_2").toggle();
event.stopPropagation();
});
$(".display_div_2").on("click", function(event) {
event.preventDefault();
event.stopPropagation();
});
$(".body").on("click", function(event) {
event.preventDefault();
$(".display_div_2").hide();
});
div.body {
background-color: white;
width: 100%;
height: 400px;
border: 1px solid grey;
}
div.display_div_1 {
display: none;
}
div.display_div_2 {
display: none;
}
ul {
margin: 0 0 30px 0;
padding: 0px;
}
li {
display: inline-block;
}
a.display {
display: inline-block;
background-color: lightblue;
padding: 10px 20px;
text-decoration: none;
}
div.display {
background-color: grey;
width: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="body">
<ul>
<li>
Display div 1
</li>
<li>
Display div 2
</li>
</ul>
<div id="first" class="display display_div_1">
This is div 1!
</div>
<div id="second" class="display display_div_2">
This is div 2!
</div>
</div>
My jquery code was taken from the first answer from the post: https://stackoverflow.com/questions/30...
Thank you!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<H1>Blah</H1>
<div class="body">
<ul>
<li>
Display div 1
</li>
<li>
Display div 2
</li>
</ul>
<div id="1" class="display display_div_1">
This is div 1!
</div>
<div id="2" class="display display_div_2">
This is div 2!
</div>
</div>
</body>
With script
$( document ).ready(function() {
$('.number').click(function() {
$('div').hide(); //you can set a class on your divs and use that if you don't want to hide all divs
$('.body').show();
$('.number').show();
$('#' + this.id.substring(3)).show(); //show just the div you want to show
});
});
Found the answer in this post: Use jQuery to hide a DIV when the user clicks outside of it
$('a#div1').click(function() {
$("div#1").show();
});
$('a#div2').click(function() {
$("div#2").show();
});
$('a#div3').click(function() {
$("div#3").show();
});
$(document).mouseup(function (e)
{
var container = new Array();
container.push($('.display_div_1'));
container.push($('.display_div_2'));
container.push($('.display_div_3'));
$.each(container, function(key, value) {
if (!$(value).is(e.target) // if the target of the click isn't the container...
&& $(value).has(e.target).length === 0) // ... nor a descendant of the container
{
$(value).hide();
}
});
});
div.body {
background-color: white;
width: 100%;
height: 400px;
border: 1px solid grey;
}
div.display_div_1 {
display: none;
}
div.display_div_2 {
display: none;
}
div.display_div_3 {
display: none;
}
ul {
margin: 0 0 30px 0;
padding: 0px;
}
li {
display: inline-block;
}
a.display {
display: inline-block;
background-color: lightblue;
padding: 10px 20px;
text-decoration: none;
}
div.display {
background-color: grey;
width: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<H1>Blah</H1>
<div class="body">
<ul>
<li>
Display div 1
</li>
<li>
Display div 2
</li>
<li>
Display div 3
</li>
</ul>
<div id="1" class="display display_div_1">
This is div 1!
</div>
<div id="2" class="display display_div_2">
This is div 2!
</div>
<div id="3" class="display display_div_3">
This is div 3!
</div>
</div>
</body>

Categories