I have an HTML like the below format:
<div class="parent1">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>
<div class="parent2">
Content here
</div>
Where Child 1/2/3 are tabs. Upon clicking one, the content will get active and a class active is added there.
I want to make the parent2 class visible (display block) only if Child 2 is active. I have tried some CSS which are not working.
Is there any possible script available for that?
Thank you.
In Jquery,
$(".child2").hasClass("active")?($(".parent2").css("display","block")):($(".parent2").css("display","none"))
A javascript onclick function will work for this.
<style>.nodisplay{display: none;}</style>
<div class="parent1">
<div id='child1' onclick='show(this)' data-id='parent2' class="child1">Parent2</div>
<div id='child2' onclick='show(this)' data-id='parent3' class="child2">Parent3</div>
<div id='child3' onclick='show(this)' data-id='parent4' class="child3">Parent4</div>
</div>
<div id='parent2' class='nodisplay'>
Content here
</div>
<div id='parent3' class='nodisplay'>
Content here
</div>
<div id='parent4' class='nodisplay'>
Content here
</div>
<script>
function show(div) {
var id1 = div.getAttribute('data-id');
var x = document.getElementById(id1);
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
First I set the display of parents 2, 3, & 4 to none with CSS. next I add an onclick function to each child div and specify the data I want my script to pick up.
Then in my function; it will either collect 'parent2', parent3', or 'parent4' depending on which div was clicked, then assigns it the variable of id1. Next I create a variable 'x' to toggle between showing the div or not.
I hope this helps you understand using javascript to manipulate CSS a little better. Have a great day.
There are several ways to do it, you can try with jQuery show() and hide() , check here:
UPDATE: Using display block
You can do this:
//Register click listener:
$(".child2").click(function() {
//Check if the class is added
if($(".child2").hasClass("active")){
//Set display block
$('.parent2').css('display', 'block')
}
});
Both css('display', 'block') and show() will work
This is a purely CSS-based tabs implementation:
.parent {
font-size: 0;
}
input[type=radio] {
display: none;
}
input[type=radio]+label {
border: 4px solid #f0f0f0;
display: inline-block;
font-size: 16px;
padding: 10px;
min-width: 100px;
text-align: center;
transition: all .2s ease;
}
input[type=radio]:checked+label {
background-color: #a00;
color: #fff;
}
.tab-content {
background-color: #f0f0f0;
position: absolute;
height: 500px;
width: 500px;
opacity: 0;
transition: all .3s ease-in-out;
font-size: 16px;
padding: 15px;
}
input[type=radio]:checked ~.tab-content {
transition: all .6s ease-in-out .2s;
}
#tab1:checked~.tab1 {
opacity: 1;
}
#tab2:checked~.tab2 {
opacity: 1;
}
#tab3:checked~.tab3 {
opacity: 1;
}
<div class="parent">
<input type="radio" name="tabs" id="tab1" checked><label for="tab1">Tab 1</label>
<input type="radio" name="tabs" id="tab2"><label for="tab2">Tab 2</label>
<input type="radio" name="tabs" id="tab3"><label for="tab3">Tab 3</label>
<div class="tab-content tab1">Content for Tab 1...</div>
<div class="tab-content tab2">... here's content for Tab 2, ...</div>
<div class="tab-content tab3">... and, last but not least, here's Tab 3 content.</div>
</div>
Related
I have no knowledge of js, but I am trying to add a class to a div when any point of the screen is clicked. I have this html
<div class="container">
<div class="box"></div>
</div>
And I need to add the class to the container when any point of the screen is clicked.
I tried this js
<script>
let button = document.querySelector('.container');
button.addEventListener('click', function() {
button.classList.add('.hide');
});
</script>
but it is not working, the class is not being applied. What am I doing wrong?
There is a small syntax error: the class should be mentioned without the dot prefix:
button.classList.add('hide');
Demo
let button = document.querySelector('.container');
button.addEventListener('click', function() {
button.classList.add('hide');
});
.container {
background-color: #ddd;
cursor: pointer;
}
.box {
background-color: #ccf;
margin: 1rem;
}
.hide {
opacity: 0;
transition: opacity .5s ease-in-out;
}
<div class="container">
<br>
<div class="box">Click anywhere in the grey container to hide it</div>
<br>
</div>
This question already has an answer here:
Change opacity on all elements except hovered one
(1 answer)
Closed 2 years ago.
I am working on a Website where I created 5 different Blocks with a div container. Now I added a CSS effect which makes the div container pop up if you hover over it.
.site-block {
position: relative;
width: 18%;
height: 345px;
background-color: #23253b;
margin: 8px;
border-radius: 12px;
top: 0;
transition: 0.5s;
}
.site-block:hover {
transform: scale(1.06);
}
HTML for 1 Block
<div class="site-block">
<div class="site-logo">
<img src="img/sites/csgoempire-logo.png"/>
</div>
<div class="bonus">
<p>Get a free case!</p>
</div>
<br>
<div class="deposit-methods">
<img src="img/deposit-methods/btc-deposit.png" alt="G2A" />
<img src="img/deposit-methods/eth-deposit.png" alt="CSGO" />
</div>
<div class="code">
<a>Primatcodes</a>
<img src="img/copy.png" alt="CSGO" />
</div>
<div class="site-url">
<a href="https://daddyskins.com/promo-code/Primatcodes">Claim
</a>
</div>
</div>
Now I want to add another effect which should blur out all the other blocks. So bassicaly if I hover over a block I want that block to pop out and have a opacity of 1 and the other 4 should lower their opacity to 0.2. Is that possible with CSS or Javascript? and if yes HOW
Looking forward to your answers!
Not sure if there is a CSS way, but here is a javascript native way using mouseenter and mouseleave events:
.container {
display:flex;
}
.site-block {
position: relative;
width: 18%;
height: 200px;
background-color: #23253b;
margin: 8px;
border-radius: 12px;
top: 0;
transition: 0.5s;
color: #FFF;
}
.site-block:hover {
transform: scale(1.06);
}
<div class="container">
<div class="site-block">
<p>AAA</p>
</div>
<div class="site-block"><p>AAA</p></div>
<div class="site-block"><p>AAA</p></div>
<div class="site-block"><p>AAA</p></div>
</div>
<!-- first try it like this, then move it to file, just make sure your HTML above js tag ☝️and its before </body> -->
<script>
const siteBox = document.querySelectorAll('.site-block');
siteBox.forEach(function(element){
element.addEventListener('mouseenter', function(event) {
siteBox.forEach((box) => {
if(event.target !== box) {
//box.style.opacity = 0.2;
box.style.backgroundColor = 'rgba(35, 37, 59, 0.2)';
box.style.color = '#000';
}
});
event.target.opacity = 1;
});
element.addEventListener('mouseleave', function(event) {
siteBox.forEach((otherBox) => {
otherBox.style.backgroundColor = 'rgb(35, 37, 59)';
otherBox.style.color = '#FFF';
});
});
});
</script>
<div id="my-spoiler">
<div id="my-spoiler-title" role="button" onclick="(document.getElementById('1').style.display=document.getElementById('1').style.display=='none' ? '' : 'none')">
Spoiler Title
</div>
<div class="my-spoiler-content" id="1" style= "display:none">
Hidden Content
</div>
</div>
In order to use this multiple times in a post, I need to create unique "id" every time like id=1, id=2....
Is there any way to call child div without any "id" and achieve the results.
Note: initially the "content" ,is hidden and when user clicks the title then the content is visible.
I don't want to use any plugins for this.
var faqToggles = document.querySelectorAll('[rel="faq-toggle"]');
faqToggles.forEach( function(toggle) {
toggle.addEventListener('click', function(event) {
event.target.closest('.faq').classList.toggle('open');
});
});
.faq {
margin-top: 20px;
}
.faq .content {
border: 1px solid blue;
}
.faq:not(.open) .content {
padding: 0;
height: 0;
overflow: hidden;
border: 1px solid red;
}
[rel='faq-toggle'] {
/* this could be a button... maybe should be... */
cursor: pointer;
}
<section class="faq">
<header rel="faq-toggle">
This is the header / teaser etc.
</header>
<main class="content">
This is the full content.
</main>
</section>
OF course - StackOverflow - reorders the code (Backwards) - but something like this?
https://jsfiddle.net/sheriffderek/t32cqmwx/
There's actually no need to use javascript, this can be done purely with CSS.
The "title" is a label for a checkbox (that is hidden). Clicking on the label toggles the checkbox "checked" property.
The input is placed immediately before the content you want to hide / show.
The "hidden" content is hidden with css.
The adjacent sibling combinator, combined with the :checked pseudo-selector, allows us to style the "hidden" content specifically when the input is checked: input:checked + .spoiler-content
.spoiler {
border: 1px solid #ccc;
}
.spoiler+.spoiler {
margin-top: 20px;
}
.spoiler input[type="checkbox"] {
display: none !important;
}
.spoiler-content {
height: auto;
max-height: 0;
overflow: hidden;
opacity: 0;
transition: all .5s;
}
input:checked+.spoiler-content {
max-height: 1000px;
opacity: 1;
}
<div class="spoiler">
<label class="spoiler-title" for="spoiler-1">
Spoiler Title
</label>
<input type="checkbox" id="spoiler-1">
<div class="spoiler-content">
Hidden Content
</div>
</div>
<div class="spoiler">
<label class="spoiler-title" for="spoiler-2">
Spoiler Title #2
</label>
<input type="checkbox" id="spoiler-2">
<div class="spoiler-content">
Hidden Content #2
</div>
</div>
NOTE: the "id" of the input and label must match, but this would be trivial to create new "ids" with php and simply injecting them into your markup easily:
<?php $spoiler_id = 'spoiler-' . rand(100000,99999999); ?>
Since you haven't shared any of your WordPress / PHP code with us, we don't know how you are adding this to your posts, so I can't advise more specifically how to get the ID injected.
I want to remove div with a great animation but I don't know how to do this.
So I make that fiddle for example :
HTML
<h2>What I have</h2>
<div class='test'>1</div>
<div class='test'>2</div>
<div class='test'>3</div>
<div class='test'>4</div>
<div class='test'>5</div>
<h2>What I Want</h2>
<div class='test2'>1</div>
<div class='test2'>2</div>
<div class='test2'>3</div>
<div class='test2'>4</div>
<div class='test2'>5</div>
CSS
div.test, div.test2 {
display:inline-block;
padding: 20px;
margin:5px;
border:1px solid black;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
JS
$('div.test').on('click', function() {
$(this).remove();
});
$('div.test2').on('click', function() {
// I don't want to change opacity or padding...
// I just want to remove with animation like this:
$(this).css('width','0px').css('padding','0px');
$(this).css('opacity',0);
});
I see a good example here
But when a div is removed, she's cut and they are only animation for the next div.
Any idea ?
EDIT
Finally resolved : Jsfiddle
Since you remove your element, it cannot be animated anymore. You could animate via a class and on transitionend remove the element. Like this for example:
.animate
{
height: 0px;//or anything you need
transition: height 1s;
}
$('#delete').click(function (e) {
//instead of remove you add a class.
$(".notification:first-child").addClass('animate');
});
$('.notification').on('transitionend', function(e){
//when transition is finished you remove the element.
$(e.target).remove()
});
http://jsfiddle.net/nawkufh1/
You could do it like this:
$('#delete').click(function (e) {
$(".notification:first-child").slideUp(function() {
$(this).remove();
});
});
$('#add').click(function (e) {
$(".notifications").append("<div class='notification'></div>");
});
.notifications {
left: 0px;
top: 0px;
width: 400px;
height: 300px;
position: relative;
border: solid 1px green;
}
.notification {
height: 40px;
background: lightblue;
margin: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button type="button" id="delete">delete</button>
<button type="button" id="add">add</button>
<div class="notifications">
<div class="notification"></div>
<div class="notification"></div>
<div class="notification"></div>
<div class="notification"></div>
</div>
This uses jQuery to animate instead of CSS. When the delete button is clicked, it slides the top bar up then it gets removed.
I've solved my problem with animation JsFiddle
Thanks all for your help.
I am working on phone-gap application in dream-weaver
I have 2 divs .pics and .cover
<div class="pics">
<div class="cover"></div>
</div>
the main idea is to change the colour of the cover div and toggle a JS variable between true and false
var checked=false;
$('.pics').click(function(){
CheckToggle();
});
function CheckToggle(){
if(checked==false){
checked=true;
$('.cover').css({"background":"rgba(255,255,255,.5)"});
}
else
checked=false;
}
I click on .pics and nothing happens
I think there is an error in the jquery code
This is what I used after all
$(function(){
$( "#item1" ).bind( "tap", PicCheck );
var checked;
var choosen="#item1";
checked=$(choosen).attr('pcheck');
function PicCheck( event ){
if(checked=="false"){
$(choosen).toggleClass("selected");
checked="true";
}
else if(checked=="true"){
$(choosen).toggleClass("selected");
checked="false";
}
$(choosen).attr('pcheck',checked);
}
});
With some css you can implement a checkbox and radio buttons with pictures. Try this :
<div>
<input id="input-1" class="img-checkbox" type="radio" name="selectTipo">
<label for="input-1" class="">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/128px-HTML5_logo_and_wordmark.svg.png">
</label>
<input class="img-checkbox" type="radio" id="input-2" name="selectTipo">
<label for="input-2">
<img src="http://www.javatpoint.com/images/javascript/javascript_logo.png">
</label>
And in your css :
input.img-checkbox[type=radio], input.img-checkbox[type=checkbox] {
display: none;
}
img{
height:100px;
}
input.img-checkbox[type=radio]+label, input.img-checkbox[type=checkbox]+label {
border: 10px solid transparent;
display: inline-block;
border-radius: 10px;
}
input.img-checkbox[type=radio]:checked+label, input.img-checkbox[type=checkbox]:checked+label {
border: 10px solid #C6ECED;
display: inline-block;
}
See the result in the follow jsfiddle
I'd skip the Javascript and use a label element and the :checked selector.
#example {
visibility: hidden;
width: 0;
}
label {
color: purple;
}
#example:checked + label {
background-color: red;
color: white;
}
The HTML would be like this:
<input id="example" type="checkbox" name="example" value="true">
<label for="example">Example</label>
With this approach you wouldn't need to worry about tracking the checked variable and you can just figure it out normally.
Here's a demo: http://jsbin.com/cirali/1/edit?html,css,output
It is usually most convenient to use additional class for your purpose.
Here is a simple example:
var checked = false;
$('.pics').click(function() {
CheckToggle();
});
function CheckToggle() {
$('.cover').toggleClass('selected');
checked = $('.cover').hasClass('selected');
}
.cover {
background: red;
}
.cover.selected {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pics">
<div class="cover">test</div>
</div>
Edit:
Since you are using jQuery mobie, you might want to try the vclick or tap events instead of the regular click event.
Depending on how you have the elements styled, it might be better to put the action on the .cover element... If the child element .cover is the exact same height and width of the parent element .pics you wont be able to click on .pics