Develop Reference

When li selected add class to div

I need to change the class of div(#pension) when I click <li> inside div(#age).
Example: When li with class under60 is clicked, add class under to div(#pension) and when li with class over60 is clicked, add class over to div(#pension).
<div id="age" class="uf-filter">
<div class="uf-title">age</div>
<ul class="uf-tags">
<li class="under60">under60</li>
<li class="over60">ove60</li>
</ul>
</div>
<div id="pension" class="uf-filter">
<div class="uf-title">pension</div>
<ul class="uf-tags">
<li class="yes">yes</li>
<li class="no">no</li>
</ul>
</div>
<script>
$(document).ready(function(){
$('#age li').click(function() {
$( '#pension' ).removeClass( "active" );
$(this).addClass('active');
});
});
</script>

Make use of class of li - over60 and under60
<style>
.under {
background-color: green;
}
.over {
background-color: red;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<div id="age" class="uf-filter">
<div class="uf-title">age</div>
<ul class="uf-tags">
<li class="under60">under60</li>
<li class="over60">ove60</li>
</ul>
</div>
<div id="pension" class="uf-filter">
<div class="uf-title">pension</div>
<ul class="uf-tags">
<li class="yes">yes</li>
<li class="no">no</li>
</ul>
</div>
<script>
$(document).ready(function() {
$('.under60').click(function() {
$('#pension').removeClass("over");
$('#pension').addClass("under");
});
$('.over60').click(function() {
$('#pension').removeClass("under");
$('#pension').addClass("over");
});
});
</script>

Try the following
$('.under60').on('click', function(){
$('#pension').addClass('under');
});
$('.over60').on('click', function(){
$('#pension').addClass('over');
});
Hope this helps.

Click outside div and icon, div hide

HTML:
<div class="menu-right">
<img class="menu-icon" src="images/menu-icon.jpg" alt="menu">
<div class="menu-drop">
<ul>
<li>ABOUT</li>
<li>SERVICES</li>
</ul>
</div>
</div>
Jquery:
$("header .menu-icon").click(function() {
$(".menu-drop").slideToggle();
});
CSS:
.menu-drop {
display: none;
}
I want when click outside .menu-drop and .menu-icon then .menu-drop div hide
when clicking menu-drop div it will stay not hide.

Use mouseup with document like below.
const $menu = $('.menu-icon, .menu-drop');
$(document).mouseup(e => {
if (!$menu.is(e.target) &&
$menu.has(e.target).length === 0) {
$(".menu-drop").hide();
}
});
$('.menu-icon').on('click', () => {
$(".menu-drop").slideToggle();
});
.menu-drop {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-right">
<img class="menu-icon" src="images/menu-icon.jpg" alt="menu">
<div class="menu-drop">
<ul>
<li>ABOUT</li>
<li>SERVICES</li>
</ul>
</div>
</div>

On document click, you can check whether the clicked element has the specific class or not, if it does not have the class slideUp() the menu. You also have to prevent the event propagation on clicking the menu.
$(".menu-icon").click(function(e) {
e.stopPropagation();
$(".menu-drop").slideToggle();
});
$(document).click(function(e) {
if(!$(e.target).hasClass('menu-right') && !($(e.target).hasClass('menu-drop')|| $(e.target).parents('.menu-drop').hasClass('menu-drop'))){
$(".menu-drop").slideUp();
}
});
.menu-drop {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-right">
<img class="menu-icon" src="images/menu-icon.jpg" alt="menu">
<div class="menu-drop">
<ul>
<li>ABOUT</li>
<li>SERVICES</li>
</ul>
</div>
</div>

Use a single event listener on the body. Query the event target and show and hid the menu as required.
$(document).ready(function() {
/*Add event listener to document*/
$(document).click(function(event) {
//If the target is the icon, toggle the menu
console.log(event.target);
console.log($(event.target).closest(".menu-drop").length)
if(event.target.matches(".menu-icon"))
{
$(".menu-drop").slideToggle();
}
//Otherwise if outside the menu, slide up
else if($(event.target).closest(".menu-drop").length === 0 )
{
$(".menu-drop").slideUp();
}
});
});
.menu-drop {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-right">
<img class="menu-icon" src="images/menu-icon.jpg" alt="menu">
<div class="menu-drop">
<ul>
<li>ABOUT</li>
<li>SERVICES</li>
</ul>
</div>
</div>

Here some modification
$(".menu-icon").click(function(e) {
$(".menu-drop").slideDown();
});
$(document).on('click', function (e) {
if(!$(e.target).hasClass('menu-icon'))
$(".menu-drop").slideUp();
});
.menu-drop {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-right">
<img class="menu-icon" src="images/menu-icon.jpg" alt="menu">
<div class="menu-drop">
<ul>
<li>ABOUT</li>
<li>SERVICES</li>
</ul>
</div>
</div>

How to show and hide a section?

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>

Not able to hide/show the div on mouse click

I have a div contents of which are dynamically generated.
I am trying to implement hide/show facility.
It kinda works but I am looking at "Hide/show only the div that's clicked."
HTML
<div class="showmenu">First Div</div>
<div class="menu" style="display: none;">
<ul>
<li>Val1</li>
<li>Val2</li>
<li>val3</li>
</ul>
</div>
<div class="showmenu">Second Div</div>
<div class="menu" style="display: none;">
<ul>
<li>val4</li>
<li>val5</li>
<li>val6</li>
</ul>
</div>
JavaScript
$(document).ready(function() {
$('.showmenu').click(function() {
$('.menu').slideToggle("fast");
});
});
Fiddle

Use relative looks up for the menu item, instead of a document wide look up($('.menu')).
In your case the showmenu and menu items are next siblings, so you can use .next()
$(document).ready(function() {
$('.showmenu').click(function() {
$(this).next('.menu').slideToggle("fast");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="showmenu">First Div</div>
<div class="menu" style="display: none;">
<ul>
<li>Val1</li>
<li>Val2</li>
<li>val3</li>
</ul>
</div>
<div class="showmenu">Second Div</div>
<div class="menu" style="display: none;">
<ul>
<li>val4</li>
<li>val5</li>
<li>val6</li>
</ul>
</div>

You need to find the .menu element related to the element which was clicked. To do that you can traverse from the element that raised the event using the this keyword and the next() method. Try this:
$('.showmenu').click(function () {
$(this).next('.menu').slideToggle("fast");
});
Example fiddle

Use this:
$(this) inside the click event handler is the menu that is clicked. next will give menu associated with it.
$(document).ready(function() {
$('.showmenu').click(function() {
$(this).next('.menu').slideToggle("fast");
});
});
Demo: http://jsfiddle.net/tusharj/APA2S/4502/

Use .next() in jquery and $(this) for current object
$('.showmenu').click(function() {
$(this).next('.menu').slideToggle("fast");
});
Fiddle

Your looking for jQuery next()
$(document).ready(function() {
$('.showmenu').click(function() {
$(this).next('.menu').slideToggle("fast");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="showmenu">First Div</div>
<div class="menu" style="display: none;">
<ul>
<li>Val1</li>
<li>Val2</li>
<li>val3</li>
</ul>
</div>
<div class="showmenu">Second Div</div>
<div class="menu" style="display: none;">
<ul>
<li>val4</li>
<li>val5</li>
<li>val6</li>
</ul>
</div>

override css of grandparent from child element

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');