jQuery toggle onclick on parent element - javascript

How can I hide the content of .ab-content if I click on .ab-head? Also hide when I click on ab-head and the content is visible. With the code I have right now, it almost works but when I click one of them all the content is toggled.
How can I maintain the function only on the parent div? Any ideas?
$(document).ready(function(){
$(".ab-head").click(function(){
$(".ab-content").toggle();
});
$(".ab-content").click(function(){
$(".ab-content").toggle();
});
});
<div class="ab-container">
<div class="ab-head">
<h1>some name 1</h1>
</div>
<div class="ab-content">
<p>some text bla bla bla 1</p>
</div>
</div>
<div class="ab-container">
<div class="ab-head">
<h1>some name 2</h1>
</div>
<div class="ab-content">
<p>some text bla bla bla 2</p>
</div>
</div>
Example: https://jsfiddle.net/yppn4nex/


Just toggle the next instance of .ab-content:
$(".ab-head").click(function(){
$(this).next(".ab-content").toggle();
});
You can also reference the current <div class="ab-content"> that the user has clicked on using the this keyword:
$(".ab-content").click(function(){
$(this).toggle();
});
Although if you are wanting to hide the content when you click on it, it's probably better to do something along the lines of what itsgoingdown suggests.
Quick demo:
$(".ab-container").on("click", function(){
$(this).find(".ab-content").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ab-container">
<div class="ab-head">
<h1>some name 1</h1>
</div>
<div class="ab-content">
<p>some text bla bla bla 1</p>
</div>
</div>
<div class="ab-container">
<div class="ab-head">
<h1>some name 2</h1>
</div>
<div class="ab-content">
<p>some text bla bla bla 2</p>
</div>
</div>


You can do it like this with event delegation: Check the below snippet
$('.ab-container').on('click', '.ab-content ,.ab-head', function() {
$(this).closest('.ab-container').find('.ab-content').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ab-container">
<div class="ab-head">
<h1>some name 1</h1>
</div>
<div class="ab-content">
<p>some text bla bla bla 1</p>
</div>
</div>
<div class="ab-container">
<div class="ab-head">
<h1>some name 2</h1>
</div>
<div class="ab-content">
<p>some text bla bla bla 2</p>
</div>
</div>

Related

How to Populate HTML page from external page divs content using jquery or js

I have a webpage which will display only the 3 first articles for each section (Politics, economy etc.) in the dedicated grid for each section,
Also the content HTML pages are external (politics.html, economy.html etc)
These external pages are updated by an external app and contains hundreds of articles (divs) as latest is the first on top of page.
So in my index.php page i want to put a grid for each category that displays only the 3 latest articles fro each category, here's my code for index.php :
<div class="POLSection">
<div class="Article" id="ArtPOL1>
<span class="ArticleTitle"></span>
</div>
<div class="Article" id="ArtPOL2>
<span class="ArticleTitle"></span>
</div>
<div class="Article" id="ArtPOL3>
<span class="ArticleTitle"></span>
</div>
</div>
<div class="ECOSection">
<div class="Article" id="ArtECO1>
<span class="ArticleTitle"></span>
</div>
<div class="Article" id="ArtECO2>
<span class="ArticleTitle"></span>
</div>
<div class="Article" id="ArtECO3>
<span class="ArticleTitle"></span>
</div>
</div>
And this is my code for the external content pages, for example politics.html :
<div id="artpol10">
<span class="artPolTitle">Joe Biden to bla bla bla ...</span>
</div>
<div id="artpol9">
<span class="artPolTitle">Joe Biden to bla bla bla ...</span>
</div>
<div id="artpol8">
<span class="artPolTitle">Joe Biden to bla bla bla ...</span>
</div>
<div id="artpol7">
<span class="artPolTitle">Joe Biden to bla bla bla ...</span>
</div>
<div id="artpol6">
<span class="artPolTitle">Joe Biden to bla bla bla ...</span>
</div>
<div id="artpol5">
<span class="artPolTitle">Joe Biden to bla bla bla ...</span>
</div>
etc. ..............
in this case i tried to load on index.php grid for politics section lates articles so 10, 9 and 8 to display them when page load ...
I tried with jquery.load but the problem is it needs the exact 3 IDs and in my case the IDs latest changes every time the app update the articles page, so it could be 10,9,8 or 11,10,9 or 23,22,21
What the best way to do this if it's not .load
Is there a way to do this by selecting nth child with jquery or js, so i can choose 1st, 2nd and 3rd child ?
Thanks.

if you can change the code for the external content pages, then add a class like "article" for the div and then you can use the LT selector on the "article" selection

Javascript get index of same class repeated multiple times in html page

I'm trying to get the index of same class repeated multiple times in different structure. For example single-row is my class name and
<div class="somediv1">
<div class="somediv2">
<div class="somediv3">
<div class="single-row">
<p id="product-name">product name 1</p>
</div>
</div>
</div>
</div>
<div class="somediv1">
<div class="somediv2">
<div class="somediv3">
<div class="somediv4">
<div class="single-row">
<p id="product-name">product name 1</p>
</div>
</div>
</div>
</div>
</div>
<div class="somediv1">
<div class="single-row">
<p id="product-name">product name 1</p>
</div>
</div>
<div class="single-row">
<p id="product-name">product name 1</p>
</div>
And below is the javascript code that I tried to get the index of my class single-row by on-click function:
.on('click', "#product-name", function (e) {
var index = $(this).parents(".single-row").index();
//var index = $(".single-row").index(this);
alert(index);
})
But I'm not getting the proper index for each div.
Live example:
$(document).on('click', "#product-name", function(e) {
var index = $(this).parents(".single-row").index();
//var index = $(".single-row").index(this);
alert(index);
})
<div class="somediv1">
<div class="somediv2">
<div class="somediv3">
<div class="single-row">
<p id="product-name">product name 1</p>
</div>
</div>
</div>
</div>
<div class="somediv1">
<div class="somediv2">
<div class="somediv3">
<div class="somediv4">
<div class="single-row">
<p id="product-name">product name 1</p>
</div>
</div>
</div>
</div>
</div>
<div class="somediv1">
<div class="single-row">
<p id="product-name">product name 1</p>
</div>
</div>
<div class="single-row">
<p id="product-name">product name 1</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Use $(this).parent().index(".single-row");
$(document).on('click', "#product-name", function(e) {
var index = $(this).parent().index(".single-row");
//var index = $(".single-row").index(this);
alert(index);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="somediv1">
<div class="somediv2">
<div class="somediv3">
<div class="single-row">
<p id="product-name">product name 1</p>
</div>
</div>
</div>
</div>
<div class="somediv1">
<div class="somediv2">
<div class="somediv3">
<div class="somediv4">
<div class="single-row">
<p id="product-name">product name 1</p>
</div>
</div>
</div>
</div>
</div>
<div class="somediv1">
<div class="single-row">
<p id="product-name">product name 1</p>
</div>
</div>
<div class="single-row">
<p id="product-name">product name 1</p>
</div>

Two issues:
Your main issue is that .index(), with no arguments, gets the index of the first element in the set you call it on relative to its siblings. You want the other form of index you had commented-out (index taking an argument), but you passed in the wrong element. The one you want to pass in can be found via $(this).closest(".single-parent"). (Or, as Sumodh Nair points out, you can use the form accepting a string.)
id values must be unique on the page. Change those id="product-name" to class="product-name". (You might be able to get away with not changing this, but it's still incorrect and needs changing.)
Updated example:
$(document).on('click', ".product-name", function(e) {
var index = $(".single-row").index($(this).closest(".single-row"));
alert(index);
})
<div class="somediv1">
<div class="somediv2">
<div class="somediv3">
<div class="single-row">
<p class="product-name">product name 1</p>
</div>
</div>
</div>
</div>
<div class="somediv1">
<div class="somediv2">
<div class="somediv3">
<div class="somediv4">
<div class="single-row">
<p class="product-name">product name 2</p>
</div>
</div>
</div>
</div>
</div>
<div class="somediv1">
<div class="single-row">
<p class="product-name">product name 3</p>
</div>
</div>
<div class="single-row">
<p class="product-name">product name 4</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

jQuery EasyTab: How to fadein/fadeout by the content class instead of the content id

I am using jQuery EasyTab to fadein/fadeout contents on hashchange function. I have multiple contents with same class names also there are 2 or 3 class names in one content. So I want to change the ID into Class.
<div id="tab-container" class='tab-container'>
<ul class='etabs'>
<li class='tab'>HTML Markup</li>
<li class='tab'>Required JS</li>
<li class='tab'>Example CSS</li>
</ul>
<div class='panel-container'>
<div id="tab1">
<p>content 1</p>
</div>
<div id="tab2">
<p>content 1</p>
</div>
<div id="tab3">
<p>content 1</p>
</div>
</div>
</div>
<!-- I want to change the panel-container section like this-->
<div class='panel-container'>
<div class="tab1 tab3">
<p>content 1</p>
</div>
<div class="tab2">
<p>content 1</p>
</div>
<div class="tab3 tab1">
<p>content 1</p>
</div>
</div>

Active Sidebar Navigation behaves strange in mobile preview

I have an active sidebar navigation, which is not moving up with all the website content when you scroll down the page.
My problem is, that it is working the way I want it to work on a desktop browser, but it jumps up and down and doesn't allow any scrolling as soon as I decrease the browser size or run it as a mobile preview (Chrome Developer Tools)
Here is a: jsfiddle, which unfortunately doesn't work. But the code below works fine! You can just copy it into an html file.
<!DOCTYPE html>
<html>
<head>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<!-- Side Navbar -->
<div class="container">
<div class="row">
<!--left-->
<div class="col-md-3" id="leftCol">
<ul class="nav nav-stacked" id="sidebar">
<li>
<div id="sideBarLogo">
<a href="#">
<img class="img-responsive" style="display:inline-block; height:120px; margin-top:200px" src="images/logo.png" alt="Logo">
<br><br><br><br>
</a>
</div>
</li>
<li><p class="raleway">Menu 1</p></li>
<li><p class="raleway">Menu 2</p></li>
<li><p class="raleway">Menu 3</p></li>
<li><p class="raleway">Menu 4</p></li>
<li><p class="raleway">Menu 5</p></li>
</ul>
</div>
<!--/left-->
<!--right-->
<div class="col-md-9">
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<br><br><br><br><br>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<br><br><br><br><br>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<br><br><br><br><br>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<br><br><br><br><br>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<br><br><br><br><br>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<br><br><br><br><br>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<br><br><br><br><br>
</div>
</div>
</div>
</body>
</html>
<script>
/* activate sidebar */
$('#sidebar').affix({
offset: {
top: 235
}
});
</script>
If somebody knows a solution, I appreciate it alot. Many thank in advance!

How do I find an element with a specific class and CSS style using jQuery?

Here is what the code looks like:
<div class='class1'>
<div class='class2'>
<div class='class3'>
<div class='class4'>
<div class='class5'>
<p>Some text 1</p>
</div>
</div>
<div class='class4'>
<div class='class5'>
<p>Some text 1</p>
</div>
</div>
<div class='class4'>
<div class='class5' style="display:block;">
<p>Some text 1</p>
</div>
</div>
<div class='class4'>
<div class='class5'>
<p>Some text 1</p>
</div>
</div>
</div>
</div>
</div>
I want to get the div with class5 and CSS property display set to block. Once I have this div I want to perform further action on that div. I tried using something like
$('.class1 .class2 .class3 .class4').find( '.class5').is(':visible')
but it doesn't work.

The problem you have is that is() returns a Boolean, reflecting whether the passed-in element (or the first of the passed-in elements) matches the supplied argument.
If you switch to filter(), which filters the passed-in collection according to the supplied argument; if the element matches then that element is retained, otherwise it's discarded:
let classFiveElems = $('.class1 .class2 .class3 .class4 .class5').filter( ':visible');
console.log(classFiveElems);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='class1'>
<div class='class2'>
<div class='class3'>
<div class='class4'>
<div class='class5'>
<p>Some text 1</p>
</div>
</div>
<div class='class4'>
<div class='class5'>
<p>Some text 1</p>
</div>
</div>
<div class='class4'>
<div class='class5' style="display:block;">
<p>Some text 1</p>
</div>
</div>
<div class='class4'>
<div class='class5'>
<p>Some text 1</p>
</div>
</div>
</div>
</div>
</div>
What you want, though, is not just a simple check for visibility; but a test for a specific CSS property; so I'd suggest the following, which uses filter() but using the anonymous function:
let classFiveElems = $('.class1 .class2 .class3 .class4 .class5').filter(function() {
return this.style.display === 'block';
}).addClass('found');
console.log(classFiveElems);
.found {
color: #f90;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='class1'>
<div class='class2'>
<div class='class3'>
<div class='class4'>
<div class='class5'>
<p>Some text 1</p>
</div>
</div>
<div class='class4'>
<div class='class5'>
<p>Some text 1</p>
</div>
</div>
<div class='class4'>
<div class='class5' style="display:block;">
<p>Some text 1</p>
</div>
</div>
<div class='class4'>
<div class='class5'>
<p>Some text 1</p>
</div>
</div>
</div>
</div>
</div>
References:
filter().
find().
is().

As example:
if($('.class1 .class2 .class3 .class4')
.find( '.class5:first')
.is(':visible')){
console.log('yes');
}
See: https://jsbin.com/ninovic/edit?html,js,console,output

.is() returns a boolean, you can use the pseudo-selector inside find() to select the element:
$('.class1 .class2 .class3 .class4').find('.class5:visible')
Example

$('.class5').each(function(){
if ($(this).is(":visible")) {
//What you want to do
}
});

You can do it directly
alert('is visible?', $( '.class5').is(':visible'));

Actually every div with class5 class has a display: block property.
display: block property is a default state of every block element (divs are block elements).
I've set the display property of other divs to none, just to show functionality of following code.
$('div').each(function() {
if ($(this).hasClass('class5') && $(this).is(":visible")) {
console.log($(this).html());
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='class1'>
<div class='class2'>
<div class='class3'>
<div class='class4'>
<div class='class5' style="display:none;">
<p>Some text 1</p>
</div>
</div>
<div class='class4'>
<div class='class5' style="display:none;">
<p>Some text 2</p>
</div>
</div>
<div class='class4'>
<div class='class5' value='t' style="display:block;">
<p>Some text 3</p>
</div>
</div>
<div class='class4'>
<div class='class5' style="display:none;">
<p>Some text 4</p>
</div>
</div>
</div>
</div>
</div>

This will return the .class5 having display:block property. IN Your case it will return all the elements. because all div in div contains default display property block, So it will return all of them in your case. and if you try then you have assure that only the elements(.class5) you want to select have display block property.
var selector = $('.class1 .class2 .class3 .class4').find( '.class5').filter(function() {
return $(this).css('display') == 'block';
});

Categories

Resources