I have the following HTML setup
<button>Start</button>
<div id="container">
<div>
<h2>First Div</h2>
<button>Test</button>
</div>
<div>
<h2>Second Div</h2>
<button>Test</button>
</div>
<div>
<h2>Third Div</h2>
</div>
</div>
I want to be able to press the start button and reveal the children divs of the div with the id of container one by one. So the first div would reveal itself on the first click and so on.
Here is the javascript that I have so far
$(document).ready(function() {
$("div").addClass("hidden");
});
var count = $("#container > div").length;
$(":button").click(function() {
if (count > 0) {
count--;
}
});
Any clever ideas?
Here is a fiddle
https://jsfiddle.net/afwonjr5/18/
I just want to hit the start button 3 times to reveal the 3 divs inside the container div.
Since you're using Jquery you can simply try it like this.
$("#container div").addClass("hidden");
var count = 0;
$("#start").click(function() {
count++;
$("#container div:nth-child("+count+")").toggle();
});
.hidden{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="start">Start</button>
<div id="container">
<div>
<h2>First Div</h2>
<button>Test</button>
</div>
<div>
<h2>Second Div</h2>
<button>Test</button>
</div>
<div>
<h2>Third Div</h2>
</div>
</div>
You can run the following code snippet :
document.querySelectorAll('#container > div').forEach(function(el) {
el.classList.add("hidden");
});
var startButton = document.getElementById("hey")
startButton.onclick = function(e) {
var arrDiv = Array.from(document.getElementById("container").getElementsByTagName("div"));
var firstDivHidden = arrDiv.filter(function(div) {
return div.classList.contains("hidden");
})[0];
if (firstDivHidden)
firstDivHidden.classList.remove("hidden");
}
.hidden {
display: none;
}
<button id="hey">Start</button>
<div id="container">
<div>
<h2>First Div</h2>
<button>Test</button>
</div>
<div>
<h2>Second Div</h2>
<button>Test</button>
</div>
<div>
<h2>Third Div</h2>
</div>
</div>
Hope it helps,
Best regards,
Related
Here is the html container:
<div class="arrow-1">
<div class="text-event">
<p class="text-style-11">Text 1
</p>
</div>
<div class="arrow">
<div class="diamond">
</div>
</div>
</div>
<div class="arrow-2">
<div class="text-event">
<p class="text-style-11">Text 2
</p>
</div>
<div class="arrow">
<div class="diamond">
</div>
</div>
</div>
<div class="arrow-3">
<div class="text-event">
<p class="text-style-11">Text 3
</p>
</div>
<div class="arrow">
<div class="diamond">
</div>
</div>
</div>
<div class="arrow-4">
<div class="text-event">
<p class="text-style-11"> Text 4
</p>
</div>
<div class="arrow">
<div class="diamond">
</div>
</div>
</div>
<div class="arrow-5">
<div class="text-event">
<p class="text-style-11"> Text 5
</p>
</div>
<div class="arrow">
<div class="diamond">
</div>
</div>
</div>
</div>
The paragraphs should be "visible" when text-event class clicked. Text style class is "hidden" by default. I did that already with other div boxes and it worked. Is there a 'p' declaration missing in the loop function? There is not even a console feedback when I pass the textEvent variable to the console.
const textEvent = document.querySelectorAll('.text-event');
for (var j = 0; j < textEvent.length; j++) (function (j) {
textEvent[j].addEventListener('click', onclick);
textEvent[j].onclick = function (ctrls) {
ctrls.forEach(ctrl => {
/* ctrl.getElementsByClassName('p')[0].innerHTML; */
ctrl.document.getElementsByClassName('text-style-11').style.visibility = "visible";
})
}
})(j);
I could not understand very well your code but this is how I would do it.
First get all the element with class "text-event"
loop over that array and add an event listener to each of them.
When you click in one of them select the element with the class of text-style-11
To something to that element.
const textContainers = document.querySelectorAll(".text-event");
textContainers.forEach((element) => {
element.addEventListener("click", () => {
const textElement = element.querySelector(".text-style-11");
textElement.style.visibility = "hidden";
});
});
Instead of adding styles directly, I recommend you to create a class and use classList toggle to add and remove that class.
textContainers.forEach((element) => {
element.addEventListener("click", () => {
const textElement = element.querySelector(".text-style-11");
textElement.classList.toggle("show");
});
});
I have tested this code it should work fine:
const textEvent = document.querySelectorAll('.text-event');
for (var j = 0; j < textEvent.length; j++) {
textEvent[j].addEventListener('click', (el) => {
const clickedElement = el.currentTarget;
const innerParagraph = clickedElement.querySelector('.text-style-11');
innerParagraph.style.visibility = 'visible';
});
}
You've already got a valid answer.. by the way here's the live snippet using the proper strategy to add an event listener to all your .text-event elements that will hide the inner paragraph embedded in the clicked box:
document.querySelectorAll('.text-event').forEach((el) => {
el.addEventListener('click', (event) => {
const clickedElement = event.currentTarget;
const innerParagraph = clickedElement.querySelector('.text-style-11');
innerParagraph.style.visibility = 'visible';
});
});
.text-event {
border: dotted gray 3px;
margin-bottom: 2px;
cursor: pointer;
}
.text-style-11{
visibility: hidden;
}
<div class="arrow-1">
<div class="text-event">
<p class="text-style-11">Alle Personen, die nicht sozialversicherungspflichtig beschäftigt sind (Beamte, Selbstständige, etc.)
</p>
</div>
<div class="arrow">
<div class="diamond">
</div>
</div>
</div>
<div class="arrow-2">
<div class="text-event">
<p class="text-style-11">Einmalige Wartezeit 1 Monate
</p>
</div>
<div class="arrow">
<div class="diamond">
</div>
</div>
</div>
<div class="arrow-3">
<div class="text-event">
<p class="text-style-11">Keine Karenzzeit
</p>
</div>
<div class="arrow">
<div class="diamond">
</div>
</div>
</div>
<div class="arrow-4">
<div class="text-event">
<p class="text-style-11">Versichert sind nur Erstdiagnosen während der Versicherungslaufzeit (Herzinfarkt, Schlaganfall, Krebs, Blindheit oder Taubheit)
</p>
</div>
<div class="arrow">
<div class="diamond">
</div>
</div>
</div>
<div class="arrow-5">
<div class="text-event">
<p class="text-style-11">Übernahme des noch ausstehenden Restsaldos von bis zu 135.000 €
</p>
</div>
<div class="arrow">
<div class="diamond">
</div>
</div>
</div>
Question correction:
I am trying to hide the entire 'li' block if the ptag inside of the 'li' is empty.
The p tag resides inside of the 'li' in a div with the class of
aaProfileDataWrapper
So if that p tag has no text inside of it then the entire 'li' need to hide including the labels and anything else it holds.
var divs = $(".aaProfileDataWrapper");
divs.each(function () {
var div = $(this);
if (div.next().html() === "<p></p>") {
div.hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li id="aaProfilePhone">
<label>Office 2 Phone:</label>
<div class="aaProfileDataWrapper">
<p></p>
</div>
<div class="aaInlineValidationWrapper">
<div class="aaValidationWrapper-Inner">
<span class="aaInlineValidationIcon"></span>
<span class="aaValidationTxt"></span>
</div>
</div>
</li>
All you need to do is query for al the p elements within any div element that has the aaProfileDataWrapper class that, themselves, are children of a li element. Then, you can loop over those p elements and, if they are empty, hide the li ancestor.
// Loop over all the p elements within the div elements that
// have the right class, that are inside of li elements
$("li div.aaProfileDataWrapper p").each(function (idx, el) {
// Check the p to see if it's empty
if ($(el).html() === "") {
$(el).closest("li").hide(); // Hide the nearest li ancestor
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li id="aaProfilePhone">
<label>Office 1 Phone:</label>
<div class="aaProfileDataWrapper">
<p></p>
</div>
<div class="aaInlineValidationWrapper">
<div class="aaValidationWrapper-Inner">
<span class="aaInlineValidationIcon"></span>
<span class="aaValidationTxt"></span>
</div>
</div>
</li>
<li id="aaProfilePhone">
<label>Office 2 Phone:</label>
<div class="aaProfileDataWrapper">
<p>something</p>
</div>
<div class="aaInlineValidationWrapper">
<div class="aaValidationWrapper-Inner">
<span class="aaInlineValidationIcon"></span>
<span class="aaValidationTxt"></span>
</div>
</div>
</li>
</ul>
Plain old JavaScript to the rescue. Pleas let me know if there is any doubt.
const divs = document.getElementsByClassName('some-class');
Array.from(divs).forEach((div) => {
const p = div.querySelector('p');
if (p && !p.innerText) {
div.style.display = 'none';
} else {
div.style.display = null;
}
});
<div class='some-class'>
<p>Show</p>
</div>
<div class='some-class'>
<p></p>
Hide
</div>
<div class='some-class'>
<p>Show</p>
</div>
<div class='some-class'>
<p></p>
Hide
</div>
<div class='some-class'>
<p>Show</p>
</div>
You can use find() to search for a <p> and then use text().length to see if it's empty.
var divs = $(".aaProfileDataWrapper");
divs.each(function () {
var p = $(this).find("p")
if (!p.text().length > 0) {
p.hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="aaProfileDataWrapper">
<p>hello world</p>
</div>
<div class="aaProfileDataWrapper">
<p>hello world</p>
</div>
<div class="aaProfileDataWrapper">
<p></p>
</div>
I'm trying to do is when I click on a text, if another div has a child that contains this text fade in. but it's not working
$('.rel-head').click(function() {
if ($('.art-h .head-art'): contains($(this).text())) {
$(this).parent().fadeIn().siblings().fadeOut();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="art-h">
<div class="head-art">some text</div>
</div>
<div class="art-h">
<div class="head-art">anoter text</div>
</div>
<div class "related-heads">
<h1 class="rel-head">some text</h1>
</div>
Use selector :contains and concat the string properly.
$('.rel-head').click(function() {
if ($('.art-h .head-art:contains('+$(this).text()+')')) {
$(this).parent().fadeIn().siblings().fadeOut();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="art-h">
<div class="head-art">some text</div>
</div>
<div class="art-h">
<div class="head-art">anoter text</div>
</div>
<div class "related-heads">
<h1 class="rel-head">some text</h1>
</div>
It's not very efficient to search the entire body every time you click on each of the specified items.
This is what I'd do.
let headArtArray = $('.art-h .head-art'); //Assign it to a variable early to reduce searching
$('.rel-head').click(function() {
let el = $(this);
let text = el.text();
for (let i = 0; i < headArtArray.length; i++) {
if (headArtArray[i].innerText.includes(text)) {
el.parent().fadeIn();
} else {
$(headArtArray[i]).fadeOut();
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="art-h">
<div class="head-art">some text</div>
</div>
<div class="art-h">
<div class="head-art">anoter text</div>
</div>
<div class "related-heads">
<h1 class="rel-head">some text</h1>
</div>
I have a div called "panel" with multiple child elements, each with a class of poster. Each poster will be a card displaying restaurant information. I want to target the h2 for whichever poster the user clicks on, irrespective of which area of the poster they click. I'm using event delegation on the panel but I'm not sure how to target the h2.
HTML:
<div class="panel">
<div class="poster">
<div class="wrapper">
<p class="time">6-7:30PM</p>
<div class="inner-wrapper">
<h2 class="restaurant-title">Restaurant A</h2>
<h3 class="deal-description">bla bla bla</h3>
</div>
</div>
</div>
<div class="poster">
<div class="wrapper">
<p class="time">2-4:30PM</p>
<div class="inner-wrapper">
<h2 class="restaurant-title">Restaurant B</h2>
<h3 class="deal-description">bla bla bla</h3>
</div>
</div>
</div>
<div class="poster">
<div class="wrapper">
<p class="time">1-5:30PM</p>
<div class="inner-wrapper">
<h2 class="restaurant-title">Restaurant C</h2>
<h3 class="deal-description">bla bla bla</h3>
</div>
</div>
</div>
</div>
JS:
var panel = document.querySelector(".panel");
panel.addEventListener("click", handleClick);
use queryselector() in javascript
function handleClick(){
var h2=this.querySelector("h2");
}
Demo
Using jquery:
$(".panel").click(function(){
var h2 = $(this).find('h2');
});
Try this :
$(document).ready(function(){
$(".poster").click(function(){
var h2 = $(this).children(".restaurant-title");
//alert(h2.context.innerText);
})
})
Example on jsfiddle: https://jsfiddle.net/ar1xawku/
Don't forget include jquery library in your code
so i figured out a solution for this, and thought i'd share:
$(".poster").click(function(){
var h2 = $(this).find('h2');
var restaurantTitle = (h2["0"].innerText);
I am trying to add some code to a page that keeps adding <div> sections to a page when a link is clicked. Here's my code:
<script type="text/javascript">
function ShowDiv() {
document.getElementById("show").style.display = "";
}
</script>
<p><a href="#" class="control" onclick="ShowDiv()"; >Add New</a></p>
<div id="show" style="display: none;">
<p>This is the div!</p>
</div>
This works great for one <div> but I need it to keep adding down the page when the link is clicked. I t is going to be used to hold a form with an array of ids for posting to PHP.
You can clone original div (which will be as template) and append cloned one to the page:
Fiddle.
HTML:
<p>
<a id="add" href="#" class="control">Add New</a>
</p>
<div id="show" style="display: none;">
<p>This is the div!</p>
</div>
JS:
$(document).ready(function()
{
var i = 0;
$('#add').click(function()
{
var newEl = $('#show').clone();
newEl.attr('id', "show" + i);
i++;
newEl.show().appendTo("body");
});
});
<script type="text/javascript">
function ShowDiv() {
var a = $("#show").clone(true); // clones element
$(".test").append(a); // appends to parent
}
</script>
<p><a href="#" class="control" onclick="ShowDiv()"; >Add New</a></p>
<div class="test"> <!-- defines parent for simple selection -->
<div id="show"> <!-- element to clone -->
<p>This is the div!</p>
</div>
</div>