We Keep Coding

How to select all child elements with a specific class using the "this" keyword?

I am creating a navigation bar that allows a user to view a dropdown after hovering or clicking a link. Each link has a class called "nav_item". There is more than 1 dropdown menu; each one has a class called "dropdown". After hovering over "nav_item" the child element with a class called "dropdown" should be set to "display: block;".
Here's my nav bar code:
<nav>
<div id="nav_title">
Learn Web Design
</div>
<div class="nav_item">
Intro
</div>
<div class="nav_item">
Learn
<ul class="dropdown">
<li>
HTML
</li>
<li>
CSS
</li>
</ul>
</div>
<div class="nav_item">
About
<ul class="dropdown">
<li>
FAQ
</li>
<li>
The Author
</li>
</ul>
</div>
<div class="nav_item">
Support
</div>
<div class="nav_item">
Contact
</div>
</nav>
Here's the jQuery code that is obviously syntactically incorrect:
$(".nav_item").click(function() {
$(this.".dropdown").css("display", "block");
});
There's another method that is clearly incorrect in CSS:
.nav_item:hover {
this.dropdown {
display: block;
}
}

Try this:
$(".nav_item").click(function() {
$(this).find(".dropdown").css("display", "block");
});
To do something similar using hover:
$(".nav_item").hover(
function(){ $(this).find('.dropdown').css('display', 'block'); },
function(){ $(this).find('.dropdown').css('display', 'none'); }
);

jQuery hide elements of Widget Style ul li

I am designing a widget style using HTML ul tag.
<div class='tabs' style='width:50%'>
<ul>
<li id="basic-li"><a href='#basic_information'>Basic</a></li>
<li id="master-passenger-li"><a href='#master_passenger'>Master Passenger</a></li>
<li id="other-passenger-li"><a href='#all_passengers'>Other Passengers</a></li >
<li id="confirm-li"><a href='#confirm'>Confirmation</a></li>
</ul>
And I have 4 divs.
<div id="basic_information" class="tab">//content</div>
<div id="master_passenger" class="tab">//content</div>
<div id="other-passenger" class="tab">//content</div>
<div id="confirm" class="tab">//content</div>
I only want to show the li's href div that has currently been clicked. I only want to use HTML / CSS and jQuery.

This is the basic idea. You can improvise as per your need. I have set the target li's id as data attribute in to div where you will click. Now on click of that div i gets li's id so we can make that shown and all else li hide.
$(document).ready(function(){
$('.tab').click(function(){
$('.tabs li').hide();
var idTab = $(this).data('id');
$('#' + idTab).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='tabs' style='width:50%'>
<ul>
<li id="basic-li"><a href='#basic_information'>Basic</a>
</li><li id="master-passenger-li"><a href='#master_passenger'>Master Passenger</a>
</li><li id="other-passenger-li"><a href='#all_passengers'>Other Passengers</a>
</li ><li id="confirm-li"><a href='#confirm'>Confirmation</a></li>
</ul>
</div>
<div id="basic_information" data-id="basic-li" class="tab">//basic info</div>
<div id="master_passenger" data-id="master-passenger-li" class="tab">//master passenger</div>
<div id="other-passenger" data-id="other-passenger-li" class="tab">//other passenger</div>
<div id="confirm" data-id="confirm-li" class="tab">//confirm</div>
Cheers...!!

This can be achieved via the following changes to your HTML, and the addition of the jQuery script below:
<ul>
<!-- add data-target attribute to each "a", with value matching corresponding tab -->
<li>
<a data-target="basic_information" href='#basic_information'>Basic</a>
</li>
<li>
<a data-target="master_passenger" href='#master_passenger'>Master Passenger</a>
</li>
<li>
<a data-target="other-passenger" href='#all_passengers'>Other Passengers</a>
</li>
<li>
<a data-target="confirm" href='#confirm'>Confirmation</a>
</li>
</ul>
<div id="basic_information" class="tab">//content</div>
<div id="master_passenger" class="tab">//content</div>
<div id="other-passenger" class="tab">//content</div>
<div id="confirm" class="tab">//content</div>
<script>
$(function() {
// Hide all tabs by default
$('.tab').hide()
// Assign click handler to all elements with data target attribute
$('[data-target]').click(function() {
// Hide all tabs
$('.tab').hide()
// Extra target id of the menu link that was clicked
var tabToShow = $(this).data('target')
// Show the corresponding tab
$('#' + tabToShow).show()
// Return false to prevent default navigation behaviour of links
return false
})
})
</script>

Div will not automatically close when click inside item

Fiddle: https://jsfiddle.net/scrfbe95/
Right now im using a main div with a list of item with a link once you click a certein list item it will show another div on the right side of the main div.
But what im trying to do is when u click a certein link inside the main div the main div will not close.
<div id="main-div1" class="main-div">
Main div 1
<div class="content">
<ul>
<li> item 1 </li>
<li> item 1 </li>
</ul>
</div>
</div>
<div id="main-div2" class="main-div">
Main div 2
<div class="content">
<ul>
<li> item 1 </li>
<li> item 1 </li>
</ul> </div>
</div>
<div id="main-div3" class="main-div">
Main div 3
<div class="content">
<ul>
<li> item 1 </li>
<li> item 1 </li>
</ul> </div>
</div>
.main-div {
padding: 10px;
margin-top: 5px;
background-color: #000;
color: #fff;
}
.main-div > .content {
display: none;
color: #fff;
}
(function($) {
$(document).on('click','.main-div',function() { showMainDiv($(this)); });
function showMainDiv($el) {
var $elContent = $el.find('.content');
if ($elContent.is(':visible')) {
$elContent.stop(true,true).slideUp(500);
}
else {
$('.main-div').find('.content').stop(true,true).not($elContent).slideUp(500);
$elContent.slideDown(500);
}
}
})(jQuery);

Modify the click listener to only react if the div clicked is the intended div like this
$(document).on('click','.main-div',function(e) {
if (e.target !== this)
return;
showMainDiv($(this)); });
Here is the fiddle;

how to make panels switch automatically

I made panels but i don't know how to make them switch automatically, i would appreciate if you help me.
js:
// akcii panels
$(".load-block:first").addClass('active');
$("#akciiContent li").click(function(event) {
event.preventDefault();
var elemId = $(this).attr("data-akcii");
$("#akciiContent li").removeClass("active");
$(".ak-block").removeClass("selected");
$(this).addClass("active");
$("#"+elemId).addClass("selected");
});
html:
<div class="row">
<div class="akcii-block-one">
<ul id="akciiContent">
<li data-akcii="block-three" class="load-block">
<p>Приведи друга</p>
<div class="loader"></div>
</li>
<li data-akcii="block-four" class="load-block">
<p>Установка центрального охранного прибора бесплатно</p>
<div class="loader"></div>
</li>
</ul>
</div>
<div class="akcii-block-two">
<div id="block-three" class="ak-block">
<img src="includes/icons/akcii-3.jpg">
</div>
<div id="block-four" class="ak-block">
<img src="includes/icons/akcii-4.jpg">
</div>
</div>
</div>

HTML markup
<div class="panels">
<ul>
<li class="active" data-panel="panel1">Tab 1</li>
<li data-panel="panel2">Tab 2</li>
<ul>
<div id="panel1" class="panel active">Panel 1 content</div>
<div id="panel2" class="panel">Panel 2 content</div>
</div>
Jquery function
$(document).ready(function(){
$('.panels ul li').on('click', function(){
if($(this).hasClass('.active')){
//ignore if its already active
return;
}
var active = $('.panels ul li.active, .panels .panel.active');
active.removeClass('active');
//set active tab
$(this).addClass('active');
//set attive panel
$('#' + $(this).attr('data-panel')).addClass('active');
});
});
CSS
.panels .panel{
display:none;
}
.panels .panel.active{
display:block;
}

Open and scroll to accordion section

I have a single page site with content placed inside an accordion. I need to both open and scroll to the accordion item when a user clicks on my nav at the top of the page. I found a couple similar functions, this being the closest (Open JQuery accordion when link with an id of element within the accordion is clicked) but unfortunately the jsfiddle links are no longer working.
Right now I just have thecode to get the accordion working...Need to get the scroll to part in there somehow...Thanks!
Code
var accordion_head = $('.accordion > li > .toggle-bar');
accordion_head.on('click', function (event) {
var $a = $(this);
event.preventDefault();
if ($a.hasClass('active')) {
$a.removeClass('active').siblings('.content-wrapper').slideUp();
}
else {
$a.addClass('active').siblings('.content-wrapper').slideDown();
}
});
.accordion li .content-wrapper {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="accordion">
<li id="1">
<a class="toggle-bar" href="#one"><h2>Headline</h2></a>
<div class="content-wrapper">
Content Here
</div>
</li>
<li id="2">
<a class="toggle-bar" href="#two"><h2>Headline</h2></a>
<div class="content-wrapper">
Content Here
</div>
</li>
<li id="3">
<a class="toggle-bar" href="#three"><h2>Headline</h2></a>
<div class="content-wrapper">
Content Here
</div>
</li>
</ul>