I have DIV wrapper which I want to toogle class using children element. However the DOM three isn't the best:
<div class="wrapper-I-want-to-toogle-class">
<div class="other-class">
<div class="other-class">
<span class="element-I-want-to-triggle-toogle-class">X</span>
</div>
</div>
</div>
How to do that?
I have alredy tried to use:
$(this).parents(".wrapper").classList.toogle('active');
However wordpress does not really allow to use functions like that.
Can You help me?
Something like this should work, its important to select the correct class name of the parent, and the child used to toggle the parent
jQuery(function(){
jQuery('.target').click(function(){
jQuery(this).parents(".wrapper").toggleClass('active');
})
})
.wrapper{
display:block;
height:20px;
background:#CCC;
}
.wrapper.active{
height:150px;
}
.target {
float:right;
display:flex;
background:#EEE;
color:#666;
border:1px solid #aaa;
width:20px;
height:20px;
justify-content:center;
align-content:middel;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="other-class">
<div class="other-class">
<span class="target">X</span>
</div>
</div>
</div>
Related
I want add class to my div
but I have so many div and any time clicked button just add or remove on one div in html
how can I do?
is there any way to use value or id?
such as that link in command
if you lock i have to button to show&hide dive but no matter which one is clicked it's just add class to first one
If you mean for toggle class slow you can use e.target with next() for toggle element like:
$('.toggle').click(function(e) {
$(e.target).next().toggle('slow');
});
body {padding:30px;}
#target {
background:#0099cc;
width:300px;
height:300px;
height:160px;
padding:5px;
display:none;
}
.Hide
{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button class="toggle">Show & Hide</button>
<div>
<p>test1</p>
</div>
</div>
<div>
<button class="toggle">Show & Hide</button>
<div>
<p>test2</p>
</div>
</div>
Or you can use data-target like:
$('.toggle').click(function(e) {
$('#'+ e.target.dataset.target).toggle('slow');
});
body {padding:30px;}
.target {
background:#0099cc;
width:300px;
height:300px;
height:160px;
padding:5px;
display:none;
}
.Hide
{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button class="toggle" data-target="target-1">Show & Hide</button>
<div id="target-1" class="target">
<p>test1</p>
</div>
</div>
<div>
<button class="toggle" data-target="target-2">Show & Hide</button>
<div id="target-2" class="target">
<p>test2</p>
</div>
</div>
Another rule you must learn, id must be unique.
Reference:
Event.target
.next()
Using data attributes
id
You can have many divs with the same class but if your looking to do something more specific to a particular div you have to use id or a seperate class. Read more about CSS selectors
<div class="blue" id="standout">Hello world</div>
<div class="blue">Hello world</div>
<div class="blue">Hello world</div>
<div class="blue">Hello world</div>
.blue{
text-align: center;
}
#standout{
text-overflow: ellipsis;
}
Add a class (or id) to the button like this:
<button class="foo-class" id="foo-id">Click me</button>
And then you can access the click on the button with the following javascript:
// class
document.querySelector('.foo-class').click(
// do something
);
// id
document.getElementById("foo-id").click(
// do something
);
See here for reference the id and here the reference for class.
please tell me how to make tabs inside tabs in this code?
$('.tabs-box').each(function(){
$(this).find('.tabs-sel span:first').addClass('current');
$(this).find('.tabs-b:first').addClass('visible');
});
$('.tabs-sel').delegate('span:not(.current)', 'click', function() {
$(this).addClass('current').siblings().removeClass('current')
.parents('.tabs-box').find('.tabs-b').hide().eq($(this).index()).fadeIn(400);
});
.tabs-b {display:none;}
.tabs-b.visible {display:block;}
.tabs-sel {padding:20px 0 0 20px;}
.tabs-sel span {display:inline-block; padding:10px 20px; vertical-align:top; cursor:pointer;}
.tabs-sel span.current {background-color:#4e647a;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs-box">
<div class="tabs-sel"><span class="current">1</span><span>2</span><span>3</span></div>
<div class="tabs-b visible">12</div>
<div class="tabs-b">13</div>
<div class="tabs-b">14</div>
</div>
https://codepen.io/senopsisder/pen/zaEpBV
Try something like this in one of the sub tabs:
<div class="tabs-b visible">
<div class="tabs-sel">
<span class="current">12</span>
</div>
</div>
I have a parent div and 2 child divs (child-left and child-right). child-right div will contain 1 or 2 icons depending on dynamic page requirement. The child-left div contains the title and also used as a handle to drag operation. I do not want to set a width px or % (like the 90% I have below). How do I set the child-left div to take the rest of available space after what is occupied by child-right.
<div id="parent">
<div id="child-left" style="width:90%">
This is my title
</div>
<div id="child-right">
<i class="fa fa-cog"></i>
</div>
</div>
Thanks!
The following should help you:
HTML:
<div id="parent">
<div id="child-right">Hey</div>
<div id="child-left">This is my title</div>
</div>
CSS:
#child-left {
border: 3px solid gray;
background-color:blue;
margin-left:0px;
overflow:hidden;
}
#child-right {
float:right;
border-style:solid;
}
#parent {
overflow:hidden;
}
DEMO JSFiddle
Please check my coding ! i want to activate only one item which one will be coming from bottom. but when i running this code it's activating all div .
$(window).scroll(function() {
$('.parallax').each(function(e) {
if($(window).scrollTop()<=120){
$(this).addClass('active');
}
});
});
<div id="home" class="parallax" style="height:600px; width:400%; display:block; border:1px solid #F00;">
</div>
<div id="features" class="parallax" style="height:600px; display:block; border:1px solid #F00;">
</div>
<div id="newsletter" class="parallax" style="height:600px; display:block; border:1px solid #F00;">
</div>
If you look at following codes:
$('.parallax').each(function(e) {
if($(window).scrollTop()<=120){
$(this).addClass('active');
}
}
which actually mean if the window top is lower than 120, then all '.parallax' will be set to style active.
Consider this JSFiddle
When I mouseenter on Span1 , a blue bar should appear below the Span1 (same for Span2 and Span3)
But even I mouseenter on Span1 or Span2 or Span3 , blue bar appears only under Span2.
CSS
div.demo {
display:table;
width:100%;
}
div.demo div {
display:table-cell;
text-align:center;
}
.under {
width:100px;
height:2px;
background-color:blue;
margin:0px auto;
display:block;
}
HTML
<div class="demo">
<div id='span1'>Span 1</div>
<div id='span2'>Span 2</div>
<div id='span3'>Span 3</div>
</div>
<div class="demo">
<div><span id='Span1'></span></div>
<div><span id='Span2'></span></div>
<div><span id='Span3'></span></div>
</div>
JS
$(document).ready(function(){
$('#span1').mouseenter(function(){
$('#Span1').addClass('under');
});
$('#span2').mouseenter(function(){
$('#Span2').addClass('under');
});
$('#span3').mouseenter(function(){
$('#Span3').addClass('under');
});
$('#span1').mouseleave(function(){
$('#Span1').removeClass('under');
});
$('#span2').mouseleave(function(){
$('#Span2').removeClass('under');
});
$('#span3').mouseleave(function(){
$('#Span3').removeClass('under');
});
});
You have no width on the cells before the hover
Working JSFiddle here: http://jsfiddle.net/F2smc/5/
div.demo div {
display:table-cell;
text-align:center;
width: 33%; // <<< Added this
}
Basically the other 2 cells are zero width so the second row collapses to something very narrow in the middle so it looks like it is only under option 2.
Better example: http://jsfiddle.net/F2smc/29/
You can get the same effect, without specifying an exact % width, by simply adding this CSS instead for the spans (so they do not collapse within their parent divs):
div.demo span
{
width:100%;
}
If you put unique colors on the divs it will become really obvious what is going on. 100% on the div does not mean the divs will use it like in a table. Basically any change that applies a width to the underlining divs/spans will work. Suggest you use Chrome in F12 debug mode to view this type of work as it clearly shows the original elements were all 0 width.
PS. Is really is a bad idea to use ids that vary only in case
On a separate note:
You would not normally hardwire events for each different id in JQuery when they all do roughly the same thing. If you change your ids to be really unique (not just by case) you can do something like:
$(document).ready(function () {
$('.menu').hover(function () {
$('#' + this.id + '-l').addClass('under');
}, function () {
$('span').removeClass('under');
});
});
Which takes the id of the current hovered item, appends something unique then updates the matching item by id.
Working demo: http://jsfiddle.net/F2smc/30/
That should clean things up while retaining your original structure.
For testing i have given text-decoration,you replace that with background-color..
HTML
<div class="demo">
<div id='one' class="hover">Span 1</div>
<div id='two' class="hover">Span 2</div>
<div id='three' class="hover">Span 3</div>
</div>
<div class="demo">
<div><span id='Span1'></span></div>
<div><span id='Span2'></span></div>
<div><span id='Span3'></span></div>
</div>
CSS
div.demo {
display:table;
width:100%;
}
div.demo div {
display:table-cell;
text-align:center;
}
.under {
width:auto;
height:1px;
text-decoration:underline;
margin:0px auto;
display:block;
}
JQuery
$(document).ready(function(){
$('.hover').hover(function(){
var id=$(this).attr("id");
$('#'+id).addClass('under');
},function(){
$('.hover').removeClass('under');
});
});
Working DEMO
Try this
I have editted your html and css
<div class="demo">
<div id='span1'>Span 1</div>
<div id='span2'>Span 2</div>
<div id='span3'>Span 3</div>
</div>
<div class="demo">
<span id='Span1'></span>
<span id='Span2'></span>
<span id='Span3'></span>
</div>
and add this to your css
div.demo span {
display:table-cell;
width:100px;
}
or
Try this
Working DEMO
without changing any html and css
just add width:100px; to
div.demo div {
display:table-cell;
text-align:center;
width:100px;
}
Hope this helps,thank you