I need to add an ease effect to the .dropdown div when it becomes visible with jQuery, but I'd be happy to do it with CSS as well. Any ideas? Thanks in advance :)
$('.btn').bind('click', function (){
$(this).parent().next('.dropdown').toggleClass('open');
});
.top,
.bottom {
background: #333;
height: 50px;
}
.dropdown {
height: 50px;
position: absolute;
color: black;
visibility: hidden;
}
.open {
position: relative;
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="top">
<button class="btn">Show content</button>
</div>
<div class="dropdown">
<p>Hidden content</p>
</div>
<div class="bottom">
</div>
https://jsfiddle.net/319zd1sg/1/
1 second fade in (https://jsfiddle.net/nh2fj27g/1/).
$('.btn').bind('click', function (){
var $dropdown = $(this).parent().next('.dropdown');
$dropdown.hasClass('open') ? $dropdown.toggleClass('open').animate({opacity: 0},1000) : $dropdown.css({opacity: 0}).toggleClass('open').animate({opacity: 1},1000);
});
Hope this helps.
$('.btn').bind('click', function() {
$('#drop').slideDown('slow');
});
.top,
.bottom {
background: #333;
height: 50px;
}
.dropdown {
display: block;
color: black;
width: 100%;
}
.drop {
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top">
<button class="btn">Show content</button>
</div>
<div id="drop" class="drop">
<div class="dropdown">
<p>Hidden content</p>
</div>
</div>
<div class="bottom">
</div>
Related
The point is that I want to implement this layout with html, css and js.
When you click on the button, the container should alternately become taller/smaller.
picture 1
picture 2
However, no fixed height should be passed, as is currently implemented.
Without using max-height, scaleY.
Also, text5 should be right under text2 and text6 right under text3 (as you can see in the picture) without using width or something similar.
The flex items should only be as large as the content.
I've also searched for solutions, but the search results weren't what I was looking for.
How can I transition height: 0; to height: auto; using CSS?
Flexbox not giving equal width to elements
Align divs under each other
let isOpen = false;
function toggleHeight() {
let row2 = document.getElementById('row2');
if(!isOpen){
isOpen= !isOpen;
row2.style.height = '120px';
//row2.style.height = 'auto';
}
else{
isOpen= !isOpen;
row2.style.height = '0';
}
}
.row1, .row2 {
display: flex;
gap: 10px;
background-color: #ccc;
}
.row2 {
height: 0;
transition: 0.25s ease;
overflow: hidden;
}
.col1 {
display:flex;
}
<div onclick="toggleHeight()">Click Me</div>
<div class="row1">
<div class="col1">
<div>
<div>text</div>
<div>text</div>
</div>
<div>
<div>text</div>
<div>text</div>
</div>
<div>
<div>text</div>
<div>text</div>
</div>
</div>
<div class="col2">
<div>text2</div>
<div>text2</div>
</div>
<div class="col2">
<div>text3</div>
<div>text3</div>
</div>
</div>
<div id="row2" class="row2">
<div class="col1">
<div>text4</div>
<div>text4</div>
</div>
<div class="col2">
<div>text5</div>
<div>text5</div>
</div>
<div class="col2">
<div>text6</div>
<div>text6</div>
</div>
</div>
I created exactly you wanted but the transition on height is not working!
const button = document.querySelector('button')
const row2 = document.querySelector('#row-2')
button.addEventListener('click', () => {
row2.classList.toggle('visible')
})
#import "https://cdn.jsdelivr.net/gh/KunalTanwar/normalize/css/normalize.inter.min.css";
body {
height: 100%;
display: grid;
place-items: center;
}
button {
padding: 4px;
border: 1px solid #c1c1c1;
}
.flex {
margin-top: 32px;
display: flex;
flex-direction: column;
}
.flex .row {
display: inherit;
column-gap: 16px;
}
.flex .row .col {
display: inherit;
padding-inline: 16px;
flex-direction: column;
}
.flex .row#row-2 {
height: 0px;
overflow: hidden;
background-color: red;
transition: height 250ms ease, overflow 250ms ease;
}
.flex .row#row-2.visible {
height: auto;
overflow: visible;
}
<div>
<button>Click Me!</button>
<div class="flex">
<div class="row" id="row-1">
<div class="col">
<span>texttexttext</span>
<span>texttexttext</span>
</div>
<div class="col">
<span>text2</span>
<span>text2</span>
</div>
<div class="col">
<span>text3</span>
<span>text3</span>
</div>
</div>
<div class="row" id="row-2">
<div class="col" style="align-self: center;">texttexttext</div>
<div class="col">
<span>text5</span>
<span>text5</span>
</div>
<div class="col">
<span>text6</span>
<span>text6</span>
</div>
</div>
</div>
</div>
P.S - remove padding-inline from .col.
Current Behavior
I have the following basic structure:
<section id="containers">
<div class="box" id="box1">
<div class="collapsible"><h2>Box 1</h2></div>
<div class="content">Content</div>
</div>
<div class="box" id="box2">
<div class="collapsible"><h2>Box 2</h2></div>
<div class="content">Content</div>
</div>
<!-- ... dozens of .boxes ... -->
</section>
#containers is .display: flex; flex-wrap: wrap, so the number of boxes on any one row is dynamic. This is an important feature that must be maintained.
Here's a minimal working example:
$(document).ready(function() {
$(".collapsible").click(function() {
$( this ).next().slideToggle();
});
});
#containers {
display: flex;
flex-wrap: wrap;
gap: 1em;
}
.box {
min-width: 15em;
background: #888;
border: #555 1px solid;
overflow: hidden;
border-radius: 0.5em;
}
.collapsible {
background: #ccc;
cursor: pointer;
}
.collapsible h2 {
margin: 0;
margin-left: 16px;
font-size: 2rem;
}
.collapsible:hover {
background: #aaf;
}
.content {
margin: 0.5em;
margin-left: 16px;
display: none; /* Initially collapsed */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<p id="status"></p>
<section id="containers">
<div class="box" id="box1">
<div class="collapsible"><h2>Box 1</h2></div>
<div class="content">Content</div>
</div>
<div class="box" id="box2">
<div class="collapsible"><h2>Box 2</h2></div>
<div class="content">Content</div>
</div>
<div class="box" id="box3">
<div class="collapsible"><h2>Box 3</h2></div>
<div class="content">Content</div>
</div>
<div class="box" id="box4">
<div class="collapsible"><h2>Box 4</h2></div>
<div class="content">Content</div>
</div>
<div class="box" id="box5">
<div class="collapsible"><h2>Box 5</h2></div>
<div class="content">Content</div>
</div>
</section>
</body>
I can easily use .slideToggle() to toggle visibility of a sibling (.content) underneath one of the clickable .collapsible divs:
$(".collapsible").click(function() {
$( this ).next().slideToggle();
});
Desired Behavior and Remarks
What I'd like is, on click of any .collapsible div in a row, the entire row will be toggled. That is, every .content div on the same horizontal row as displayed in the current viewport.
This must handle rows with dynamic number of columns, including viewport resizing. I'm flexible on the precise behavior, though.
Is this possible? And how much will it hurt?🙂 Changes to the document structure (such as adding some sort of row container) are OK, and I don't mind using some JS/jQuery code of course. The main thing I can't do is hard code the number of columns, as I need my site to remain responsive on vertical phones and fullscreen desktop browsers.
Maybe the jQuery slideToggle() function is not the best method.
Since a row will be the same height , you may look at a method to set size from 0 to another value. anybox resized will stretch other boxes on the same row.
here an example of the idea, setting a max-height from 0 to 200px and a transition.
it toggles a class.
$(document).ready(function() {
$(".collapsible").click(function() {
this.classList.toggle('slide');// plain javascript to toggle a class
});
});
*{box-sizing:border-box}
#containers {
display: flex;
flex-wrap: wrap;
gap: 1em;
}
.box {
min-width: 15em;
background: #888;
border: #555 1px solid;
overflow: hidden;
border-radius: 0.5em;
}
.collapsible {
background: #ccc;
cursor: pointer;
}
.collapsible h2 {
margin: 0;
margin-left: 16px;
font-size: 2rem;
}
p{margin-top:0;}
.collapsible:hover {
background: #aaf;
}
.content {
margin:0 0.5em;
margin-left: 16px;
max-height:0; /* Initially collapsed */
transition:0.5s
}
.slide + .content{max-height:400px;/* which one got the class*/ color:darkred}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<p id="status"></p>
<section id="containers">
<div class="box" id="box1">
<div class="collapsible"><h2>Box 1</h2></div>
<div class="content"><p>Content</p></div>
</div>
<div class="box" id="box2">
<div class="collapsible"><h2>Box 2</h2></div>
<div class="content"><p>Content</p><p>Content</p></div>
</div>
<div class="box" id="box3">
<div class="collapsible"><h2>Box 3</h2></div>
<div class="content"><p>Content</p></div>
</div>
<div class="box" id="box4">
<div class="collapsible"><h2>Box 4</h2></div>
<div class="content"><p>Content</p><p>Content</p><p>Content</p></div>
</div>
<div class="box" id="box5">
<div class="collapsible"><h2>Box 5</h2></div>
<div class="content"><p>Content</p></div>
</div>
</section>
</body>
What you are missing here , is to set the height of the row to the height of the taller box, unless they will all be the same height.
For this, you can look for every box at the same top offset that the one clicked, and look for the tallest innercontent of the .contents and use this height .
Here comes the idea looking where each are standing and resets a max-height rule, you can inspire from too:
// defaut : supposed to be with no class 'slide' set on html elements
$(document).ready(function () {
let boxes = document.querySelectorAll(".collapsible");
let contents = document.querySelectorAll(".content");
$(".collapsible").click(function (event) {
let arrayContent = [];//reset
let hide=false;
for (i = 0; i < contents.length; i++) {
contents[i].style.maxHeight = "min-content";
let index = i;
let heightC = contents[i].offsetTop;
let boxOffset = contents[i].parentNode.offsetTop + 1;
// a few infos .add/remove what is needed
arrayContent.push({
index,
heightC,
boxOffset
});
contents[i].setAttribute("style", "");// resets inline style
}
let rowOffset = this.offsetTop;
if(this.classList.contains('slide')) {
hide=true;
}
let classState = this.classList;
arrayContent.forEach(function (obj) {
if (obj.boxOffset == rowOffset) {
if(hide == true) boxes[obj.index].classList.add('slide');/* reset needed if window resized => rows reorganized ? */
boxes[obj.index].classList.toggle("slide");
} else {
boxes[obj.index].classList.remove("slide");
}
});
});
});
* {
box-sizing: border-box
}
#containers {
display: flex;
flex-wrap: wrap;
gap: 1em;
}
.box {
min-width: 15em;
background: #888;
border: #555 1px solid;
overflow: hidden;
border-radius: 0.5em;
}
.collapsible {
background: #ccc;
cursor: pointer;
}
.collapsible h2 {
margin: 0;
margin-left: 16px;
font-size: 2rem;
}
p {
margin-top: 0;
}
.collapsible:hover {
background: #aaf;
}
.content {
margin: 0 0.5em;
margin-left: 16px;
max-height: 0;
/* Initially collapsed */
transition: max-height 0.5s!important
}
.slide~.content {
max-height: 400px;
/* which one got the class*/
color: darkred;
}
.collapsible:before {
content: attr(class)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<p id="status"></p>
<section id="containers">
<div class="box" id="box1">
<div class="collapsible">
<h2>Box 1</h2>
</div>
<div class="content">
<p>Content</p>
</div>
</div>
<div class="box" id="box2">
<div class="collapsible">
<h2>Box 2</h2>
</div>
<div class="content">
<p>Content</p>
<p>Content</p>
</div>
</div>
<div class="box" id="box3">
<div class="collapsible">
<h2>Box 3</h2>
</div>
<div class="content">
<p>Content</p>
</div>
</div>
<div class="box" id="box4">
<div class="collapsible">
<h2>Box 4</h2>
</div>
<div class="content">
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>
<div class="box" id="box5">
<div class="collapsible">
<h2>Box 5</h2>
</div>
<div class="content">
<p>Content</p>
</div>
</div>
</section>
</body>
So i'm using three unique IDs "titleselected0", "titleselected1", "titleselected2". Each with an onclick function which runs a function "myFunction0", "myFunction1", "myFunction2". I'm using this to change the styling. My question is whether I can use a loop so i only need to use one function instead of three?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style type="text/css">.collapse {
display: none;
}
.collapse.in {
display: block;
}
.title {
background-color: #005FAA;
border: none;
border-radius: 0;
padding: 30px;
}
.title:hover {
background-color: #009cde;
border: none;
border-radius: 0;
padding: 30px;
}
.container{
margin-top:25px;
float:left;
width: 32%;
margin-right: 2%;
}
.container:last-child{
margin-right:0px;
width:32%;}
#media only screen and (max-width: 800px) {
.container{
margin-top:15px;
width: 100%;
}
.container:last-child{
margin-top:15px;
width: 100%;
}
}
.titleselected{
background-color: #009cde;
border:none;
border-radius:0;
padding: 30px;
}
</style>
<div>
<div class="container">
<div class="title" data-toggle="collapse" href="#collapse" id="titleselected0" onclick="myFunction0()">
<h4>System Information</h4>
</div>
<div class="collapse" id="collapse" style="background-color:#005FAA;transition: width 200ms ease-out, height 200ms ease-out;">
<div style="color:white; padding: 30px;border:none;">
<p><strong>TestingTestingTestingTestingTestingTestingTesting</strong></p>
<ul>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
</ul>
<p><strong>TestingTestingTestingTestingTestingTestingTesting: </strong></p>
<ul>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="title" data-toggle="collapse" href="#collapse2" id="titleselected1" onclick="myFunction1()">
<h4>Product Specification</h4>
</div>
<div class="collapse" id="collapse2" style="background-color:#005FAA;transition: width 200ms ease-out, height 200ms ease-out;">
<div style="color:white; padding: 30px;border:none;">
<p><strong>TestingTestingTestingTestingTestingTestingTesting:</strong></p>
<ul>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="title" data-toggle="collapse" href="#collapse3" id="titleselected2" onclick="myFunction2()">
<h4>Case Study</h4>
</div>
<div class="collapse" id="collapse3" style="background-color:#005FAA;transition: width 200ms ease-out, height 200ms ease-out;">
<div style="color:white; padding: 30px;border:none;">
<p><strong>TestingTestingTestingTestingTestingTestingTesting: </strong></p>
<ul>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
<li>TestingTestingTestingTestingTestingTestingTesting appeared in the CIBSE Journal</li>
</ul>
</div>
</div>
</div>
</div>
<script>
function myFunction0() {
var element = document.getElementById("titleselected0");
element.classList.toggle("titleselected");
}
function myFunction1() {
var element = document.getElementById("titleselected1");
element.classList.toggle("titleselected");
}
function myFunction2() {
var element = document.getElementById("titleselected2");
element.classList.toggle("titleselected");
}
</script>
Those elements already have a class of title, so you can just loop over all .title elements and attach the listener:
document.querySelectorAll('.title').forEach((element) => {
element.addEventListener('click', () => {
element.classList.toggle("titleselected");
});
});
(feel free to delete all of their ids and the inline attribute onclick handlers - best to attach listeners with Javascript, not HTML)
You could also use event delegation on the container which has all .titles:
<div class="container-for-all">
<div class="container">
...
</div>
<div class="container">
...
</div>
<!-- etc -->
and
document.querySelector('.container-for-all').addEventListener('click', ({ target }) => {
const closestTitle = target.closest('.title');
if (!closestTitle) {
return;
}
closestTitle.classList.toggle('titleselected');
});
I'm creating something like this. When I hover the buttons upper content will change but each buttons have different content.
But I cannot see the content when hovering it :(
Does anybody know how to fix it? or is there any jquery fix?
Thanks in advance
#service-content {
display: none;
opacity: 1;
height: 200px;
-webkit-animation: flash 1.5s;
animation: flash 1.5s;
}
#-webkit-keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
#keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
#home-button-1:hover~#service-content .construction-neuve,
#home-button-2:hover~#service-content .renovation-residentiel,
#home-button-3:hover~#service-content .service-de-plan-et-design,
#home-button-4:hover~#service-content .entrepreneur-commercial,
#home-button-5:hover~#service-content .apres-sinistre,
#home-button-6:hover~#service-content .decontamination-d-amiante
{
display: block;
opacity: 1;
-webkit-animation: flash 1.5s;
animation: flash 1.5s;
}
#slider-buttons .span4 {
width: 383px;
float:left;
height:50px;
}
#slider-buttons .image-content {
position: relative;
}
#slider-buttons .image-caption {
background: #000000 none repeat scroll 0 0;
bottom: 0;
color: #6e6e6e;
padding: 10px 0;
position: absolute;
text-align: center;
text-transform: uppercase;
width: 383px;
font-weight: 600;
}
#slider-buttons .image-caption:hover {
background: #ba9444 none repeat scroll 0 0;
bottom: 0;
color: #000000;
padding: 10px 0;
position: absolute;
text-align: center;
text-transform: uppercase;
width: 383px;
font-weight: 600;
cursor: pointer;
}
<div id="service-content">
<div class="construction-neuve">
content
</div>
<div class="renovation-residentiel">
content
</div>
<div class="service-de-plan-et-design">
content
</div>
<div class="entrepreneur-commercial">
content
</div>
<div class="apres-sinistre">
content
</div>
<div class="decontamination-d-amiante">
content
</div>
</div>
<div id="slider-buttons" class="span12">
<div id="construction-neuve" class="span4 m-l00">
<div class="image-content">
<img src="images/home-buttons/home-button-1.jpg">
<div id="home-button-1" class="image-caption">Construction Neuve</div>
</div>
</div>
<div id="renovation-residentiel" class="span4 m-l10">
<div class="image-content">
<img src="images/home-buttons/home-button-2.jpg">
<div id="home-button-2" class="image-caption">Rénovation Résidentiel</div>
</div>
</div>
<div id="service-de-plan-et-design" class="span4 m-l10">
<div class="image-content">
<img src="images/home-buttons/home-button-3.jpg">
<div id="home-button-3" class="image-caption">Service de plan et design</div>
</div>
</div>
<div id="entrepreneur-commercial" class="span4 m-l00">
<div class="image-content">
<img src="images/home-buttons/home-button-4.jpg">
<div id="home-button-4" class="image-caption">Entrepreneur Commercial</div>
</div>
</div>
<div id="apres-sinistre" class="span4 m-l10">
<div class="image-content">
<img src="images/home-buttons/home-button-5.jpg">
<div id="home-button-5" class="image-caption">Aprés-Sinistre</div>
</div>
</div>
<div id="decontamination-d-amiante" class="span4 m-l10">
<div class="image-content">
<img src="images/home-buttons/home-button-6.jpg">
<div id="home-button-6" class="image-caption">Décontamination d'amiante</div>
</div>
</div>
</div>
It can be done using JQuery.
First, each part that should be hovered must have an onmouseover attribute that the first parameter of that should be a unique number. like this:
<div onmouseover="run_hover(1);"></div>
<div onmouseover="run_hover(2);"></div>
<div onmouseover="run_hover(3);"></div>
and each big part that will be shown should have a unique ID with a number that is the same with the parameter you entered for the div that should be hovered. Like this:
<div id="box_for_show">
<div id="div_1">Content 1</div>
<div id="div_2">Content 2</div>
<div id="div_3">Content 3</div>
</div>
and this is the JQuery code of that:
function run_hover(id) {
$("#box_for_show div").fadeOut(function(){
$("#div_"+id).fadeIn();
});
}
Point: #box_for_show div {display: none;}
Here is the fiddle that will work for you:
http://jsfiddle.net/h0puq1Ld/4/
It is not the best example but i hope it helps. You could also use list
$('div.image-caption').hover(function(){
var nums = $(this).attr('id');
$('#cont-'+nums).css('display','block');
}, function() {
$('.cont').hide();
});
Just like the title says, I have an element that shouldn't be fading but is. The element in question is text on top of an image that fades when you move your mouse over it.
HTML:
<div id="image-wrapper">
<ul id="team-members">
<li class="tile-wrapper fade">
<div class="tile">
<img src="http://placehold.it/158x210" />
<h3 class="bio bio-header" style="display:none;">Header</h3>
<p class="bio bio-footer" style="display:none;">Information</p>
</div>
</li>
</ul>
jQuery
$(document).ready(function () {
$('.fade').mouseenter(function (ev) {
$(this).fadeTo(150, 0.5);
$(this).find('img').siblings().fadeIn(150);
}).mouseleave(function () {
$(this).fadeTo(150, 1);
$(this).find('img').siblings().fadeOut(150);
});
});
Fiddle: https://jsfiddle.net/oLckb6h3/4/
A suggestion:
HTML
<div id="image-wrapper" >
<ul id="team-members">
<li class="tile-wrapper fade">
<div class="tile">
<div class="doFade"> </div>
<div class="info">
<h3 class="bio bio-header">Header</h3>
<p class="bio bio-footer">Information</p>
</div>
<img src="http://placehold.it/158x210"/>
</div>
</li>
</ul>
</div>
CSS
ul {
list-style-type:none;
}
.bio {
padding:15px;
}
.tile {
width:158px;
height:210px;
border: 1px solid black;
position: relative;
}
.doFade {
position: absolute;
left: 0;
background: #fff;
top: 0;
right: 0;
bottom: 0;
opacity: 0.5;
display: none;
}
.info {
position: absolute;
left: 0;
background: transparent;
top: 0;
right: 0;
bottom: 0;
display: none;
}
jQuery
$(document).ready(function() {
$('.fade').mouseenter(function(ev) {
$('.doFade', this).add( $('.info', this) ).fadeIn(150);
}).mouseleave(function() {
$('.doFade', this).add( $('.info', this) ).fadeOut(150);
});
});
DEMO
Fade the img rather than the .fade element...
$(document).ready(function() {
$('.fade').mouseenter(function(ev) {
$(this).find('img').fadeTo(150, 0.5).siblings().fadeIn(150);
}).mouseleave(function() {
$(this).find('img').fadeTo(150, 1).siblings().fadeOut(150);
});
});
ul {
list-style-type:none;
}
.bio {
padding:15px;
}
.bio-header {
margin-top:-150px;
}
.tile {
width:158px;
height:210px;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="image-wrapper" >
<ul id="team-members">
<li class="tile-wrapper fade">
<div class="tile">
<img src="http://placehold.it/158x210"/>
<h3 class="bio bio-header" style="display:none;">Header</h3>
<p class="bio bio-footer" style="display:none;">Information</p>
</div>
</li>
</ul>
</div>