Our html:
<ul class="accordion">
<li>
<h2 class="a-head">head 1</h2>
<div class="a-body">body 1</div>
</li>
<li>
<h2 class="a-head">head 2</h2>
<div class="a-body">body 2</div>
</li>
<li>
<h2 class="a-head">head 3</h2>
<div class="a-body">body 3</div>
</li>
</ul>
JS:
$(".accordion .a-head").click(function()
{
$(this).css({backgroundColor:"#ccc"}).next(".a-body").slideToggle().siblings(".a-body").slideUp();
$(this).siblings().css({backgroundColor:"#fff"});
});
This accordion begins to work If I remove <li></li>. How do I make it work with current code?
Actually problem is in .siblings().
Thanks.
I can offer you this:
jQuery:
$('li h2.a-head').click(
function(){
$(this).closest('ul').find('div.a-body').slideUp(400);
$(this).closest('li').find('div.a-body').slideToggle(400);
});
css:
li div.a-body {
display: none;
}
JS Fiddle demo.
Is it what you want? : http://jsfiddle.net/v2Z5L/1/
It could be simpler if you'd put a container for your "a-body" elements. For now, each of them slide, one by one.
Related
I've been trying to get my divs to display per click - which works..... However, I want Div1 to be shown - but Div2 and Div3 hidden until clicked and when clicked, the current visible div should be hidden.
$(function(){
$("#tabs li a").click(function(){
$(".platform").hide();
var myDiv = $(this).attr("href");
$(myDiv).show();
});
});
.platform {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="tabs">
<li>PC</li>
<li>PS4</li>
<li>XBOX</li>
</ul>
<div class="platform tab1" id="tab1">
<div>
platform 1
</div>
</div>
<div class="platform tab2" id="tab2">
<div>
platform 2
</div>
</div>
<div class="platform tab3" id="tab3">
<div>
platform 3
</div>
</div>
I've managed to get the following:
Show all on load and show none until a click is registered. But onlick seems to not work when I add in the classes:
Show (display:block;)
hide (display:none;)
What could be causing this?
I would like for tab1 to show on page load, but tab 2 and tab 3 only show when clicked..... But that also hides the current active div.
Is there another method to onclick?
Just specify the first tab in your css. JQuery will add it's own CSS which will have a higher specificity on click.
$(function(){
$("#tabs li a").click(function(){
$(".platform").hide();
var myDiv = $(this).attr("href");
$(myDiv).show();
});
});
.platform {
display: none;
}
.platform.tab1 { /* <-- I added this */
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="tabs">
<li>PC</li>
<li>PS4</li>
<li>XBOX</li>
</ul>
<div class="platform tab1" id="tab1">
<div>
platform 1
</div>
</div>
<div class="platform tab2" id="tab2">
<div>
platform 2
</div>
</div>
<div class="platform tab3" id="tab3">
<div>
platform 3
</div>
</div>
Instead of using .hide() and .show() you could use a show class. Include this in the class of the first tab, then change it in the click handler.
$(function() {
$("#tabs li a").click(function() {
$(".platform.show").removeClass("show");
var myDiv = $(this).attr("href");
$(myDiv).addClass("show");
});
});
.platform {
display: none;
}
.platform.show {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="tabs">
<li>PC</li>
<li>PS4</li>
<li>XBOX</li>
</ul>
<div class="platform tab1 show" id="tab1">
<div>
platform 1
</div>
</div>
<div class="platform tab2" id="tab2">
<div>
platform 2
</div>
</div>
<div class="platform tab3" id="tab3">
<div>
platform 3
</div>
</div>
I got a page and want to add a css class to every heading, which contains a specific word above it, inside the div "metadata". Here is an example:
<ul class="postlist">
<li><div class="postBox">
<h2> Test Sample 1</h2>
<div class="metadata"><a href="LinkToCat" class="link" id="cat">Internal, Test</div>
</div></li>
<li><div class="postBox">
<h2> Test Sample 2</h2>
<div class="metadata"><a href="LinkToCat" class="link" id="cat">Test</div>
</div></li>
</ul>
I tried with jquery like this:
if ($('div.postBox > div.metadata > a:contains("Internal")').length > 0)
$( "h2 a" ).addClass( "a-internal" );
This works - But the problem is, every heading element gets the class "a-internal", because the headings don't have unique IDs/names, right? Does somebody have an idea how I can nevertheless only add the class to the specific heading?
Thanks a lot!
Instead of if use DOM relationship to target the element. Use .closest() to traverse up-to common ancestor then use .find() to target the element.
Use
$('div.postBox > div.metadata > a:contains("Internal")')
.closest('div.postBox') //Traverse up-to common ancestor
.find("h2 a") //target element
.addClass("a-internal")
$('div.postBox > div.metadata > a:contains("Internal")').closest('div.postBox').find("h2 a").addClass("a-internal")
.a-internal {
color: green
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="postlist">
<li>
<div class="postBox">
<h2> Test Sample 1</h2>
<div class="metadata"><a href="LinkToCat" class="link" id="cat">Internal, Test</div>
</div></li>
<li><div class="postBox">
<h2> Test Sample 2</h2>
<div class="metadata"><a href="LinkToCat" class="link" id="cat">Test</div>
</div></li>
</ul>
:has() can also be used
$('div.postBox:has(> div.metadata > a:contains("Internal"))')
.find("h2 a")
.addClass("a-internal")
$('div.postBox:has(> div.metadata > a:contains("Internal"))')
.find("h2 a")
.addClass("a-internal")
.a-internal {
color: green
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="postlist">
<li>
<div class="postBox">
<h2> Test Sample 1</h2>
<div class="metadata"><a href="LinkToCat" class="link" id="cat">Internal, Test</div>
</div></li>
<li><div class="postBox">
<h2> Test Sample 2</h2>
<div class="metadata"><a href="LinkToCat" class="link" id="cat">Test</div>
</div></li>
</ul>
I have accordian lists with one list open always. How can I toggle the active class when the button is clicked?
<ul class="accordion one-open">
<li class="active">
<div class="title">Title 1</div>
<div class="content">Content 1</div>
</li>
<li>
<div class="title">Title 2</div>
<div class="content">Content 2</div>
</li>
</ul>
<button>Toggle the content </button>
Use .toggleClass("active") of jquery and check the below snippet.
$(document).ready(function(){
$("#toggel_class").on('click',function(){
$("ul li").toggleClass("active");
});
});
.active { color: red }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="accordion one-open">
<li class="active">
<div class="title">Title 1</div>
<div class="content">Content 1</div>
</li>
<li>
<div class="title">Title 2</div>
<div class="content">Content 2</div>
</li>
</ul>
<button id="toggel_class">Toggle the content </button>
$("button").on("click", function() {
$("li").toggleClass("active");
});
This toggles the class when the button is clicked: https://jsfiddle.net/mqhyLohe/
Try looking at JavaScript classList.toggle() (not compatible with IE9 and lower). Otherwise take a look at jQuery UI (if jQuery is the path you want to wander).
Check if it works
$(".accordion li").click(function(){
$("li").removeClass('active');
$(this).addClass('active');
});
you have to give your list an id
$("#item1").click(function(){
$(".active").removeClass("active");
$(this).addClass("active")
});
I too had faced the same problem. Solved it using icons. Please refer the answer here
This is what I had used before:
if($(this).text() == "-")
{
$(this).text("+");
}
else {
$('#accordion .opener').text("+");
$(this).text("-");
}
});
I want to show the div of selected HTML link.
For example:
I clicked on the html link Categories the <div id="categories" ... > will be showed and the other div's will hide.
HTML
<div id="col-navigation">
<ul>
<li>
Quizzes
</li>
<li>
Categories
</li>
<li>
Jump
</li>
</ul>
</div>
<div id="quizzes"> //default showed
Quizzes!
</div>
<div id="categories" style="display:none">
Categories!
</div>
<div id="jump" style="display:none">
Jump!
</div>
Try this:-
$('#col-navigation a').click(function(){
$('#quizzes,#categories,#jump').hide();
$('#' + $.trim($(this).text()).toLowerCase()).show();
});
Fiddle
OR
$('#col-navigation a').click(function(){
$('#quizzes,#categories,#jump').show()
.not('#' + $.trim($(this).text()).toLowerCase()).hide();
});
Fiddle
$("#col-navigation a").click(function(e) {
var getText = $(this).text().trim().toLowerCase();
$("#"+getText).toggle().siblings().hide();
e.preventDefault();
});
use the above code to make it work.
Working Fiddle : https://jsfiddle.net/z4bprass/1/
You can use css :target, general siblings selector ~
:target {
display: block !important;
}
:target ~ div[id] {
display: none;
}
<div id="col-navigation">
<ul>
<li>
Quizzes
</li>
<li>
Categories
</li>
<li>
Jump
</li>
</ul>
</div>
<div>
<div id="categories" style="display:none">
Categories!
</div>
<div id="jump" style="display:none">
Jump!
</div>
<div id="quizzes">//default showed Quizzes!
</div>
</div>
I have the following code structure:-
<li class="container">
<div class="wrap">
<div class="green">...</div>
</div>
</li>
<li class="container">
<div class="wrap">
<div class="xyz">...</div>
</div>
</li>
..
.. so on
Now li has the following css :-
margin-top:35px
I don't want to inherit the above margin for li which contains the class green but I want it for the class xyz.
I have tried using operator > in css but it doesn't work.
If you dont want margin-top:35px to be applied (inherit from parent li) to div.green then here is the solution
CSS
.green {
margin-top:-35px;
}
HTML
<li class="container">
<div class="wrap">
<div class="green">...</div>
</div>
</li>
<li class="container">
<div class="wrap">
<div class="xyz">...</div>
</div>
</li>
You can use :has() jQuery pseudo selector:
$('.container:has(.xyz)').css(...);
With this code structure, assuming a parent container:
<ul>
<li class="container">
<div class="wrap">
<div class="green">...</div>
</div>
</li>
<li class="container">
<div class="wrap">
<div class="xyz">...</div>
</div>
</li>
</ul>
You could do this:
ul li:nth-child(2) {
margin: 0;
}
https://developer.mozilla.org/en/docs/Web/CSS/:nth-child
But a rule to "If I have inside a div with xyz class then..." I think it is impossible in pure css.
I hope it helps.
There is no parent selector in css but you can use javascript:
$('.xyz').closest('.container').css('margin-top', '35px');