I have a <ul> containing <h2> headings with text below each. I want to be able to display or hide the text below by clicking the each of the headings.
How can I tell jquery to only display the text from within the same <li> when the heading is clicked without creating a seperate if statement for each <li>?
<ul>
<li>
<h2>heading</h2>
<div id='step'>
text text text
</div>
</li>
<li>
<h2>heading</h2>
<div id='step'>
text text text
</div>
</li>
</ul>
<script>
$("li").click(function () {
if ($("#step").is(":hidden")) {
$("#step").slideDown("slow");
} else {
$("#step").slideUp("slow");
}
});
</script>
For a start you have duplicate ids, this is incorrect. Replace them with classes or other identifiers as ids should be unique.
Secondly use $(this) to reference the element that was clicked.
HTML
<ul>
<li>
<h2>heading</h2>
<div class='step'>
text text text
</div>
</li>
<li>
<h2>heading</h2>
<div class='step'>
text text text
</div>
</li>
</ul>
JavaScript
$("li").click(function () {
$(this).children('.step').slideToggle('slow');
});
JSFiddle: http://jsfiddle.net/JGZRN/
This should do it :) $(this) refers to the list element that has been clicked, then it "finds" the p tag under it and "slideToggle"'s which either slides up or down depending on its current state.
<script>
$(function(){
$('li').click(function(){
$(this).find('p').slideToggle();
});
});
</script>
<ul>
<li>
<h2>heading 1</h2>
<p>Text text text</p>
</li>
<li>
<h2>heading 2</h2>
<p>Text text text</p>
</li>
</ul>
If you change the id="step" by class="step" in the divs, you can use this code:
$("li").click(function () {
var div = $(this).find(".step");
if (div.is(":hidden")) {
div.slideDown("slow");
}
else {
div.slideUp("slow");
}
});
The problem lies in the fact that you are trying to target a div with id step but there are multiple divs with that id. Use different id's for the div
It can be fixe as follows:
<ul>
<li>
<h2>heading</h2>
<div>
text text text
</div>
</li>
<li>
<h2>heading</h2>
<div>
text text text
</div>
</li>
</ul>
and the js
$("li").click(function () {
if ($(this).children('div').is(":hidden")) {
$(this).children('div').slideDown("slow");
} else {
$(this).children('div').slideUp("slow");
}
});
Do note that in this example it assumes you are using only one div in the li
you can do this:
html:
<ul>
<li>
<h2>heading</h2>
<div id='step'>
text text text
</div>
</li>
<li>
<h2>heading</h2>
<div id='step'>
text text text
</div>
</li>
</ul>
js:
$('ul li h2').click(function() {
$('#step').toggle('slow', function() {
// Animation complete.
});
});
here a preview fiddle http://jsfiddle.net/wandarkaf/2Pnz7/
Hope this helps.
Related
I would like to clone an element inside a div and append it to another div without any click event, on page load. This is my code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="hs-search-results__listing">
<li>
Search Title
<p class="more-link-container">
</p>
</li>
<li>
Search Title
<p class="more-link-container">
</p>
</li>
</ul>
<script>
$('.hs-search-results__listing li').each(function(){
$(this).find('.hs-search-results__title').clone().appendTo(".more-link-container");
});
</script>
I am trying the above but it is not working.
In each iteration you are appending to all the elements with class more-link-container available in the DOM. You should append the element only to the relevant p element.
Change
.appendTo(".more-link-container")
To
.appendTo($(this).find(".more-link-container"))
$('.hs-search-results__listing li').each(function(){
$(this).find('.hs-search-results__title').clone().appendTo($(this).find(".more-link-container"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="hs-search-results__listing">
<li>
Search Title
<p class="more-link-container">
</p>
</li>
<li>
Search Title
<p class="more-link-container">
</p>
</li>
</ul>
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>
I want to find the 3rd p tag of each category, based on first p tag's value.
e.g. The first p tag value is Tie, then find the quantity of it.
If the html element tree should be formatted in a better way, I am open to it. The html for all ul is written from code behind at C# to load items from database.
$("#wel div ").each(function(index, element) {
if ($(this).('p:nth-of-type(1)').html() == "Tie")
{
$(this).('p:nth-of-type(3)').css('background-color','red');
}
}
<div id="fel">Category1
<ul>
<li>
<div >
<p>Shirt</p>
<p>Price:$25</p>
<p>Quantity:20</p> <!--find this?-->
</div>
</li>
<li>
<div>
<p>Tie</p>
<p>Price:$10</p>
<p>Quantity:10</p>
</div>
</li>
<li>
<div>
<p>Trousers</p>
<p>Price:$50</p>
<p>Quantity:5</p>
</div>
</li>
</ul>
</div>
<div id="wel">Category2
<ul>
<li>
<div >
<p>Shirt</p>
<p>Price:$25</p>
<p>Quantity:20</p>
</div>
</li>
<li>
<div>
<p>Tie</p>
<p>Price:$10</p>
<p>Quantity:10</p><!--find this?-->
</div>
</li>
<li>
<div>
<p>Trousers</p>
<p>Price:$50</p>
<p>Quantity:5</p>
</div>
</li>
</ul>
</div>
JSFiddle
You can 2 top level elements with different ids fel and wel so need to use #wel div, #fel div to find the category div elements, then need to use .find() to find the p
$("#wel div, #fel div").each(function (index, element) {
if ($(this).find('p:nth-of-type(1)').html().trim() == "Tie") {
$(this).find('p:nth-of-type(3)').css('background-color', 'red');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="fel">Category1
<li>
<div>
<p>Shirt</p>
<p>Price:$25</p>
<p>Quantity:20</p>
<!--find this?-->
</div>
</li>
<li>
<div>
<p>Tie</p>
<p>Price:$10</p>
<p>Quantity:10</p>
</div>
</li>
<li>
<div>
<p>Trousers</p>
<p>Price:$50</p>
<p>Quantity:5</p>
</div>
</li>
</div>
<div id="wel">Category2
<li>
<div>
<p>Shirt</p>
<p>Price:$25</p>
<p>Quantity:20</p>
</div>
</li>
<li>
<div>
<p>Tie</p>
<p>Price:$10</p>
<p>Quantity:10</p>
<!--find this?-->
</div>
</li>
<li>
<div>
<p>Trousers</p>
<p>Price:$50</p>
<p>Quantity:5</p>
</div>
</li>
</div>
You can also do
$("#wel div, #fel div ").each(function (index, element) {
var $ps = $(this).find('p');
if ($ps.eq(0).html().trim() == "Tie") {
$ps.eq(2).css('background-color', 'red');
}
})
Demo: Fiddle
Here's the generic way of doing it
$(document).ready(function(){
var div = $('p:contains("Tie")').parent()
$('p:contains("Tie")').parent()
var price = $(div).find("p:contains('Price')").css('background-color','red');
console.log(price)
});
Please refer the fiddle here
I am hoping somebody can help me out with my Javascript. The JSFiddle shows you how far I have got, I'm not far off...but I am basically trying to get the content of the enclosed DIVs to align to the top of the '.news_window' box when the nav is clicked.
http://jsfiddle.net/s5sxa0sk/2/
I realise that the scrollTop going to 'this' is incorrect, but I don't know how else to proceed.
Any input would be very much appreciated.
The HTML:
<ul class="news_archive">
<li class="active">December</li>
<li>November</li>
<li>October</li>
</ul>
<div class="news_window">
<div id="dec_2014">
<p>December Content</p>
</div>
<div id="nov_2014">
<p>November Content</p>
</div>
<div id="oct_2014">
<p>October Content</p>
</div>
</div>
The Javascript:
<script>
$(".news_archive li").click(function(e){
e.preventDefault();
$('.news_window').animate({scrollTop:$(this).position().top}, 'slow');
$('.news_archive li.active').removeClass('active');
$(this).addClass('active');
});
</script>
Your main issues is you're using the #new_archive link's top position to animate the scroll instead of the #news_window item's top position. You need to find the #news_window element based on which link is clicked and use that element's position().top.
You will also need a wrapper around the #news_window items otherwise each element's position().top will change based on the current scroll position of the #news_window element. This wrapper will need position: relative set.
Here's what I mean:
<ul class="news_archive">
<li class="active">
<a data-id="dec_2014" href="#">December</a>
</li>
<li>
<a data-id="nov_2014" href="#">November</a>
</li>
<li>
<a data-id="oct_2014" href="#">October</a>
</li>
</ul>
<div class="news_window">
<div class="wrapper">
<div id="dec_2014">
<p>December Content</p>
</div>
<div id="nov_2014">
<p>November Content</p>
</div>
<div id="oct_2014">
<p>October Content</p>
</div>
</div>
</div>
And the Javascript:
$('.news_archive li a').click(function(e) {
e.preventDefault();
var newsWindowEl = $('#'+$(this).data('id'));
$('.news_window').animate({
scrollTop: newsWindowEl.position().top
}, 'slow');
$('.news_archive li.active').removeClass('active');
$(this).parents('li').addClass('active');
});
Here's a working version of your fiddle: http://jsfiddle.net/s5sxa0sk/42/
I have this html code:
<div id="menu">
<ul id="menuFuncionalidades">
<li>
<div class="menuFuncionalidades_categoria">
Index</div>
</li>
<li>
<div class="menuFuncionalidades_categoria">
Cadastros</div>
<div class="menuFuncionalidades_content_links">
<div class="menuFuncionalidades_content_links_descricao">
<span class="menuFuncionalidades_content_links_descricao_titulo">Descrição</span>
<div class="menuFuncionalidades_content_links_descricao_texto">
Lorem Ipsum...
</div>
</div>
<div class="menuFuncionalidades_content_links_links">
<ul><b>Acesso Usuario</b>
<li>Pesquisar </li>
<li>Incluir </li>
<li>Alterar </li>
<li>Consultar </li>
</ul>
<ul><b>Produto</b>
<li>Pesquisar </li>
<li>Incluir </li>
</ul>
<ul><b>Perfil</b>
<li>Pesquisar </li>
<li>Incluir </li>
</ul>
</div>
</div>
</li>
<li>
<div class="menuFuncionalidades_categoria">
Coletores</div>
<div class="menuFuncionalidades_content_links">
<div class="menuFuncionalidades_content_links_descricao">
<span class="menuFuncionalidades_content_links_descricao_titulo">Descrição</span>
<div class="menuFuncionalidades_content_links_descricao_texto">
Lorem Ipsum...
</div>
</div>
<div class="menuFuncionalidades_content_links_links">
<ul>
<b>Coletor 1</b>
<li>Pesquisar </li>
<li>Incluir </li>
</ul>
<ul>
<b>Coletor 2</b>
<li>Pesquisar </li>
<li>Incluir </li>
</ul>
<ul>
<b>Coletor 3</b>
<li>Pesquisar </li>
<li>Incluir </li>
</ul>
</div>
</div>
</li>
</ul>
</div>
My objective is when i click in a menuFuncionalidades_categoria i close all menuFuncionalidades_content_links that is opened, and opened the right one that is in the same level of the menuFuncionalidades_categoria that i click. So, i try this, but i have no success:
$(document).ready(function () {
$('#menuFuncionalidades > li > .menuFuncionalidades_categoria').click(function () {
$("#menu").children().find('.menuFuncionalidades_content_links').each(function () {
// I need a code here to close only the tags that are opened but is not the current
if ($(this).css('display') == 'block') {
$(this).hide();
}
});
$(this).parent().find('.menuFuncionalidades_content_links').slideToggle('normal').css('width', $('#menu').css('width'));
});
});
What am i missing or doing wrong?
OBS: The behavior that i want, is similar with accordion menu.
DEMO here: http://fiddle.jshell.net/ry9dz/1/
As #karim79 says, you can't check "display" that way - it's a css attribute, not an html attribute.
On the other hand, if you want to close all other entries, then just do that - no need to check if they are visible first! I also suggest you use a more efficient event handler for all your items, instead of binding it to all of them. Using jQuery 1.7, something like this would work:
$(document).ready(function () {
$("#menuFuncionalidades").on("click", ".menuFuncionalidades_categoria", function(event) {
var selectedMenu = $(event.target).parents("li").find(".menuFuncionalidades_content_links")
, visible = selectedMenu.is(":visible");
// Hide all others
$("#menuFuncionalidades .menuFuncionalidades_content_links").hide();
// Show this one unless it was already visible
if(!visible) {
selectedMenu
.slideToggle('normal')
.css('width', $('#menu').css('width'));
}
// Prevent the default action
event.preventDefault();
});
});
You can hide multiple elements without iterating though all of them to see which ones aren't hidden.
Replace;
$("#menu").children().find('.menuFuncionalidades_content_links').each(function () {
if ($(this).attr('display') == 'block') {
$(this).hide();
}
});
with;
$("#menu").find('.menuFuncionalidades_content_links').hide();
$(this).attr('display') is invalid as there are no "display" attribute and instead of using .css('display') == 'block' you could simply use the psuedo selector :visible.
You want the display css property:
if ($(this).css('display') == 'block') {
$(this).hide();
}
or:
if ($(this).is(':visible')) {
$(this).hide();
}