We Keep Coding

jQuery btn to close div if made active

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.

How to change hover action to click action?

Hello people I created two divs and when i hover to h3 shows me something. I want display this only when i click on h3. How i can do this?
How to change hover to click? When i do this doesn't working.
Sorry for my bad language.
$(document).ready(function () {
$('li.requirement').hover(function () {
$(this).find('span').show();
}, function () {
$(this).find('span').hide();
});
});
#wrap {
background: #e7e7e7;
padding: 0px;
text-align: center;
width: 100%;
}
#left, #right {
background: #ccc;
display: inline-block;
padding: 20px;
}
li {
list-style-type: none;
padding: 0px;
margin: 0px;
}
span.lewy {float:right; background:red; padding:20px;}
span.prawy {float:left; background:red; padding:20px;}
h3 {text-align:center;}
h3.praw {float:left;}
h3.lew {float:right;}
.calosc {max-width:500px; margin: 0 auto; border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
<div id="left"><div class="lef">
<li class="requirement" id="requirement_1">
<h3 class="lew">SPR</h3>
<span class="fr drag lewy" style="display:none;">1 kontakt</span>
</li>
</div></div>
<div id="right"><div class="praf">
<li class="requirement" id="requirement_2">
<h3 class="praw">SPR 2</h3>
<span class="fr drag prawy" style="display:none;">2 kontakt</span>
</li>
</div></div>
</div>

You can use .on('click', function(){}); and then inside this function you check to see if it's already visible or not. Take a look here
EDIT
As you want to be just the <h3> clickable, i made an adjustment in the code below, and now you need to cehck for the visibility of the h3 parent, because now the context of this is now h3 and no more the li
$(document).ready(function () {
$('.clickableH3').on('click', function () {
if ($(this.parentElement).find('span').is(":visible")){
$(this.parentElement).find('span').hide();
}else{
$(this.parentElement).find('span').show();
}
});
});
#wrap {
background: #e7e7e7;
padding: 0px;
text-align: center;
width: 100%;
}
#left, #right {
background: #ccc;
display: inline-block;
padding: 20px;
}
li {
list-style-type: none;
padding: 0px;
margin: 0px;
}
span.lewy {float:right; background:red; padding:20px;}
span.prawy {float:left; background:red; padding:20px;}
h3 {text-align:center;}
h3.praw {float:left;}
h3.lew {float:right;}
.calosc {max-width:500px; margin: 0 auto; border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
<div id="left"><div class="lef">
<li class="requirement" id="requirement_1">
<h3 class="lew clickableH3">SPR</h3>
<span class="fr drag lewy" style="display:none;">1 kontakt</span>
</li>
</div></div>
<div id="right"><div class="praf">
<li class="requirement" id="requirement_2">
<h3 class="praw clickableH3">SPR 2</h3>
<span class="fr drag prawy" style="display:none;">2 kontakt</span>
</li>
</div></div>
</div>

Well you see, in your js code, where you have "hover" ? Well you type "click" there instead ...

The jQuery hover function can have 2 parameters, which is your case. The first one for the hover, the second is for the unhover
So if you want to be able to close and hide on click I advise to use some css and use toggleClass. But if you wan to keep only javascript you can do like this:
$(document).ready(function () {
$('li.requirement').click(function () {
var $elm = $(this);
if( $elm.hasClass('showed') ){
$elm.find('span').removeClass('showed').hide();
}else{
$elm.find('span').addClass('showed').show();
}
});
});

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>

Expand / Collapse div by clicking another

I'm looking to create a div that expands and collapses when a completely separate, non-parent div element is clicked.
Below is an example of an expanding/collapsing effect I like and have been messing around with. I am unsure how best to modify the code below so that I could, say, click on a div located in a sidebar, and cause another div located below the header say, to expand/collapse, pushing all content below it downwards.
The contents of the expanding/collapsing div in question might be a search bar for instance, which can be shown/hidden by the user by clicking on a sidebar button.
$(".header").click(function () {
$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function () {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function () {
//change text based on condition
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
});
.container {
width:100%;
border:1px solid #d3d3d3;
}
.container div {
width:100%;
}
.container .header {
background-color:#d3d3d3;
padding: 2px;
cursor: pointer;
font-weight: bold;
}
.container .content {
display: none;
padding : 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
<div class="header"><span>Expand</span>
</div>
<div class="content">
<ul>
<li>I'm putting a search bar here.</li>
</ul>
</div>
</div>

$(".header").click(function() {
$('.content').slideToggle().toggleClass('active');
if ($('.content').hasClass('active')) {
$('.header span').text('Collapse');
} else {
$('.header span').text('Expand');
}
});
$('button').click(function(){
$(".header").trigger('click');
})
.container {
width:100%;
border:1px solid #d3d3d3;
}
.container div {
width:100%;
}
.container .header {
background-color:#d3d3d3;
padding: 2px;
cursor: pointer;
font-weight: bold;
}
.container .content {
display: none;
padding : 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
<div class="header"><span>Expand</span>
</div>
<div class="content">
<ul>
<li>I'm putting a search bar here.</li>
</ul>
</div>
</div>
<button>another click</button>

$(".toggle").click(function () {
//getting the content
$content = $(".content")
//open up the content - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function () {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function () {
//change text based on condition
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
});
.container {
width:100%;
border:1px solid #d3d3d3;
}
.container div {
width:100%;
}
.container .header {
background-color:#d3d3d3;
padding: 2px;
cursor: pointer;
font-weight: bold;
}
.container .content {
display: none;
padding : 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
<div class="header"><span>Expand</span>
</div>
<div class="content">
<ul>
<li>I'm putting a search bar here.</li>
</ul>
</div>
<div class="toggle">click me</dov>
</div>

Highlight selected image

I'm trying to highlight a selected image with a box around it, exactly the same as what appears for the 'hover'. Any ideas? I've tried a few things but nothing seems to work. The hover function works perfectly, but when clicked I need a box to appear around the image that stays, even when the cursor is moved away. I have pasted my code below. Thank you in advance!!
<html><head>
<style type="text/css">
.event {
display: inline-block;
float: left;
}
.swatch {
width: 57px;
height: 45px;
display: inline-block;
float: left;
background-repeat: no-repeat;
padding: 5px;
background-position: center center;
margin-top: 8px;
}
.swatch:hover {
border: thin solid #999;
background-position: center center;
}
.selected {
border: thin solid #999;
}
.sq562-white {
background-image: url(../images/products/women/lifeguard_girlstee_white.jpg);
}
.sq562-red {
background-image: url(../images/products/women/lifeguard_girlstee_red.jpg);
}
</style>
<script type="text/javascript">
$(window).load(function(){
$(document).ready(function() {
// hide all the events
$("#bigCal p").hide();
$(".event a").click(function(evt) {
evt.preventDefault();
$("#bigCal p").hide();
var id = $(this).attr('id');
$("." + id).show();
});
});
});//]]>
</script>
</head>
<body>
<li class="event">
<a id="red" href="#" >
<div class="swatch sq562-white"></div>
</a>
</li>
<li class="event">
<a id="blue" href="#">
<div class="swatch sq562-red"></div>
</a>
</li>
</ul>
<div id="bigCal">
<p style="display: block; margin-top:25px; margin-bottom:-54px;" class="all blue"><a title="Red">Red</a></p>
<p style="display: none; margin-top:25px; margin-bottom:-54px;" class="all red"><a title="White">White</a></p>
</div>
</body></html>

Use onclick to add the .selected class (with jQuery, can also be done with only JavaScript):
$(".swatch").click(function() {
$(this).addClass("selected");
}

Hello you can also test this code:
$(document).ready(function() {
// hide all the events
$("#bigCal p").hide();
$(".event a").click(function(evt) {
evt.preventDefault();
//remove the previous selected item
$(".swatch").removeClass("selected");
//select the current item
$(".swatch", this).addClass("selected");
$("#bigCal p").hide();
var id = $(this).attr('id');
$("." + id).show();
});
});
And a sample: http://jsfiddle.net/SNUhB/2/