We Keep Coding

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();
}
});
});

CSS Expand / Contract Animation to Show/Hide Content

I am trying to create a box that can expand and collapse with a simple slide out animation. If you run the example below, the idea is that it starts with one red line and when you click the button it separates into two read lines and gently expands to reveal the content like pulling a draw out of a table.
I've tried both transform, animation, relative: positioning with top, and i'm unable to get the desired effect.
The containing box should expand in size
function expandContract() {
const el = document.getElementById("expand-contract")
el.classList.toggle('expanded')
el.classList.toggle('collapsed')
}
#container {
border: 1px solid black;
padding: 15px;
}
#top-section {
border-bottom: 1px solid red;
}
#expand-contract {
border-bottom: 1px solid red;
}
.expand-contract {
transform: translateY(-100%)
overflow: hidden;
}
#keyframes slide-in {
100% {
transform: translateY(0%)
}
}
.expanded {
background-color: green;
animation-name: slide-in;
animation-duration: 1s;
}
.collapsed {
background-color: red;
transform: translateY(-100%)
}
<div id="container">
<div id="top-section">
This is always displayed
</div>
<div id="expand-contract" class="expanded">
This section expands and contracts
<table>
<tr><td>test1</td></tr>
<tr><td>test2</td></tr>
<tr><td>test3</td></tr>
<tr><td>test4</td></tr>
</table>
</div>
<div id="bottom-section">
This section is always displayed
</div>
</div>
<button onclick="expandContract()">Expand/Contract</button>

You can achieve this using the CSS transition along with toggled styles. Initially you may think to transition the height (from 0 to initial so that it expands dynamically based on height) but unfortunately CSS transition doesn't properly handle this.
Instead, you can wrap it in a container of its own with overflow: hidden and then use a margin-top: -100% to hide it, and 0 to show it.
Here is your code with this modification:
function expandContract() {
const el = document.getElementById("expand-contract")
el.classList.toggle('expanded')
el.classList.toggle('collapsed')
}
#container {
border: 1px solid black;
padding: 15px;
}
#top-section {
border-bottom: 1px solid red;
}
#expand-container {
overflow: hidden;
}
#expand-contract {
border-bottom: 1px solid red;
margin-top: -100%;
transition: all 1s;
}
#expand-contract.expanded {
background-color: green;
margin-top: 0;
}
<div id="container">
<div id="top-section">
This is always displayed
</div>
<div id="expand-container">
<div id="expand-contract" class="expanded">
This section expands and contracts
<table>
<tr><td>test1</td></tr>
<tr><td>test2</td></tr>
<tr><td>test3</td></tr>
<tr><td>test4</td></tr>
</table>
</div>
</div>
<div id="bottom-section">
This section is always displayed
</div>
</div>
<button onclick="expandContract()">Expand/Contract</button>

hope to help you
HTML
<div class="container">
<div id="top-section">
This is always displayed
</div>
<div id="expand-container">
<div class="expanded" id="expand-contract">
<table>
<tr><td>test1</td></tr>
<tr><td>test2</td></tr>
<tr><td>test3</td></tr>
<tr><td>test4</td></tr>
</table>
</div>
</div>
</div>
<button class="header" onclick="expandContract()">Expand/Contract</button>
css
.container {
width:100%;
border:1px solid #d3d3d3;
}
.container div {
width:100%;
}
.header {
background-color:#d3d3d3;
padding: 2px;
cursor: pointer;
font-weight: bold;
}
.container .expanded {
display: none;
padding : 5px;
}
js
function expandContract() {
$header = $(".header");
$content = $("#expand-contract")
$content.slideToggle(500, function () {
$header.text(function () {
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
};
see here enter code here

Hovering a navbar item to change into the next section

I want to switch from section 1 to section 2 of the page, when using the mouse to hover the buttons in the navigation bar without clicking them.
How should I do so?
and here is the code in below:
CSS:
.container {
overflow: hidden;
background-color: #FFFFFF;
font-family: Arial;
top:0;
left:0;padding: 5px;
}
.container a {
float: left;
font-size: 16px;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.pull-right {
float: right;
}
#topNav {
margin-bottom:0;box-shadow: none;background:none;
}
body {
position: relative;
}
#section1 {padding-top:120px;height:500px;color: #fff; background-color: #1E88E5;}
#section2 {padding-top:120px;height:500px;color: #fff; background-color: #673ab7;}
#section3 {padding-top:120px;height:500px;color: #000000; background-color: #FFD2E9;}
#section4 {padding-top:120px;height:500px;color: #fff; background-color: #00bcd4;}
HTML:
<div class="navbar navbar-inverse navbar-static-top" id="topNav">
<div class="container">
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
Toehold Switch
Interlab
Charaterization
Program
</ul>
</div>

You cannot do it with CSS alone. You are suppose to use scripts. Take a look on the [fiddler][1] for your reference.
[1]: https://jsfiddle.net/rajsnd08/c9xonwdL/1/
Hope it helps.

you can use jQuery
FIRST: define an id for the 'navbar item' which you want to hover.
for example add id: "item1" for the "Toehold switch" element in your navbar:
Toehold Switch
SECOND: append the jQuery library to your project:
one way, is to add its link to the html header :
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
THIRD: add this javascript script code to your html:
<script>
$("#item1").hover(function () {
var hash = $("#item1").attr("href");
var scroll = $(hash.toString()).offset().top;
event.preventDefault();
$('body,html').animate(
{scrollTop: (scroll)},
1000,
function () {
window.location.hash = hash;
}
);
});
</script>
TIP 1: by using the script, if you hover the "toehold" link on the navbar, it will scroll to the section which you were linked to (i.e. 'section 1')
TIP 2: you can also change the speed of scrolling in the animate() function in the script tag: just change '1000' to whatever you want. (that is 1000 ms i.e. 1 second)!

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>

show hidden child div without changing the size of parent div

I have the following code:
function show() {
document.getElementById("child").style.display = "block";
}
#parent {
background-color: orange;
padding: 2em;
}
#child {
background-color: pink;
padding: 3em;
display: none;
}
<div id="parent" onmouseover="show()">
<div id="child">
Child div
</div>
</div>
When I hover over the parent div, the size of the parent changes. Is there a way to show the child div above the parent div, without changing the size of the parent div?

You can use
visibility:hidden
in place of
display:none
To show/hide the content and keep the size unchanged. Need to change the script accordingly.

You could use a relative position on your parent and an absolute position on the child elements:
function show()
{
document.getElementById("child").style.display="block";
}
#parent
{
background-color: orange;
padding:2em;
position:relative;
}
#child
{
background-color: pink;
padding: 3em;
display: none;
position: absolute;
}
<html>
<head>
<title></title>
</head>
<body>
<div id="parent" onmouseover="show()">
<div id="child">
Child div
</div>
</div>
</body>
</html>

Is this what you require http://jsfiddle.net/u74m4x9o/
<div id="parent" onmouseover="show()">
<div id="child">
Child div
</div>
</div>
function show() {
document.getElementById("child").style.display = "block";
}
#parent {
background-color: orange;
padding: 2em;
}
#child {
background-color: pink;
padding: 1em;
display: none;
position:absolute;
top : 1em
}