I'm fairly inexperienced with JS/Jquery in general, so this could be something simple I'm missing. I am trying to hide some text on a page, then enable it via a toggle link. This is the JS being used. The top one for "Attendence" works fine, but the one for "Description" does not hide nor toggle the text. I basically copy/pasted description from attendance, so I'm not sure why it's not working.
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".attend_list").hide();
$(".attend_toggle").click(function()
{
$(this).parent().next('.attend_list').toggle();
});
$(".description_text").hide();
$(".description_toggle").click(function()
{
$(this).parent().next('.description_text').toggle();
});
});
</script>
This is the relevant HTML that is generated for each.
Attendance
<div id="attending10" class="membersAttending">
<div style="clear: both;"></div>
<div id="membertoggle10">
<p class="attend_toggle">
Toggle Attendance
</p>
<div style="clear: both;"></div>
</div>
<p class="attend_list">
test - Yes<br />
</p>
</div>
Description
<div id="description10" class="description">
<div style="clear: both;"></div>
<div id="descriptiontoggle10">
<p class="description_toggle">
Description
</p>
<div style="clear: both;"></div>
</div>
<p class="description_text">
<p>Test</p>
</p>
</div>
The problem is in your HTML not your jQuery
You are missing a </div> and you have a paragraph inside a paragraph.
<div id="attending10" class="membersAttending">
<div style="clear: both;"></div>
<div id="membertoggle10">
<p class="attend_toggle">
Toggle Attendance
</p>
<div style="clear: both;"></div>
</div>
<p class="attend_list">
test - Yes<br />
</p>
</div> <!--- this was missing -->
<div id="description10" class="description">
<div style="clear: both;"></div>
<div id="descriptiontoggle10">
<p class="description_toggle">
Description
</p>
<div style="clear: both;"></div>
</div>
<p class="description_text">
Test <!--- this was a p in a p-->
</p>
</div>
Working demo http://jsfiddle.net/qLPEw/
Also (not part of the problem) if you create an event that does something to an element, and it needs actioning on load, trigger that event instead of writing more lines of jQuery.
jQuery(document).ready(function($) {
$(".attend_toggle").click(function(){
$(this).parent().next('.attend_list').toggle();
}).click(); // trigger the bound function on load
$(".description_toggle").click(function(){
$(this).parent().next('.description_text').toggle();
}).click(); // trigger the bound function on load
});
Though, I would hide those with CSS instead if they are meant to be hidden when the user first looks at the page.
Related
Hi I am doing a Vanilla JS practice and I'd like to remove a div whenever I click on a span saying"continue". However, I got stuck at the JS coding.
EACH DIV HAS THE CLASSES one, two and three respectively.
here's my code
HTML:
<body>
<div class="container">
<div class="one">
<p class="card" id="test"><span class="texta">Hello<br><span class="next">Continue</span><span></p>
</div>
<div class="two">
<p class="card" id="test"><span class="texta">Hello<br><span class="next">Continue</span><span></p>
</div>
<div class="three">
<p class="card"><span class="texta">Hello<br><span class="next" onClick="move()">Continue</span><span></p>
</div>
</div>
</body>
JS:
function move(){
document.getElementsByClassName("three")[0].style="opacity:0";
}
I'm trying to do the effect using as much JS as possible, and as little html as possible. Apart from coding each and every div by getElementsByClassName(""), is there a more efficient way to go about it?
Also, I thought I saw event.target syntax somewhere online before and I wonder if it could be applied in this context?
Thanks for any help rendered!! :)
Here's a more dynamic solution. Also in your HTML-Code are some mistakes (missing '/' in an ending span; identical id's).
function move(el) {
el.closest('div').style = 'display: none;'
}
<body>
<div class="container">
<div class="one">
<p class="card">
<span class="texta">Hello<br>
<span class="next" onClick="move(this)">Continue</span>
</span>
</p>
</div>
<div class="two">
<p class="card">
<span class="texta">Hello<br>
<span class="next" onClick="move(this)">Continue</span>
</span>
</p>
</div>
<div class="three">
<p class="card">
<span class="texta">Hello<br>
<span class="next" onClick="move(this)">Continue</span>
</span>
</p>
</div>
</div>
</body>
function move(className){
document.getElementsByClassName(className)[0].style="display:none";
}
<body>
<div class="container">
<div class="one">
<p class="card" id="test"><span class="texta">Hello1<br><span class="next" onClick="move('one')">Continue</span><span></p>
</div>
<div class="two">
<p class="card" id="test"><span class="texta">Hello2<br><span class="next" onClick="move('two')">Continue</span><span></p>
</div>
<div class="three">
<p class="card"><span class="texta">Hello3<br><span class="next" onClick="move('three')">Continue</span><span></p>
</div>
</div>
</body>
Can you please check you want this type of thing or not?
First time question on this site. Sorry if I have failed the formatting test.
I am almost completely ignorant about javascript but I have been told I need it to solve this problem. I have a page where there are multiple divs with the same class. Each has a multi-level hierarchy beneath it. I want to stop the parent displaying if any of its children contain a div of a particular class. e.g. In the following code I want to stop all divs with class of "classa" displaying if one of their direct or indirect children contains class of "classb draft". So here, none of divb would display.
<div id="diva" class="classa">
<div id="divaa">
</div>
<div id="divab">
<div id="divaba">
<div id="divabaa"
<div id="divabaaa" class="classb">
</div>
</div>
</div>
</div>
</div>
<div id="divb" class="classa">
<div id="divba">
</div>
<div id="divbb">
<div id="divbba">
<div id="divbbaa"
<div id="divbbaaa" class="classb draft">
</div>
</div>
</div>
</div>
</div>
You are not closing div in
<div id="divabaa"
You can use querySelectorAll() to select all the children with that class (draft). Then use forEach() to loop through all the matching elements to find the closest() div with .classa to set display property to none.
var elements = document.querySelectorAll('.classa .draft');
elements.forEach(function(el){
el.closest('.classa').style.display = 'none';
});
<div id="diva" class="classa">
<div id="divaa">
</div>
<div id="divab">
<div id="divaba">
<div id="divabaa">
<div id="divabaaa" class="classb">
Without Draft
</div>
</div>
</div>
</div>
</div>
<div id="divs" class="classa">
<div id="divba">
</div>
<div id="divbb">
<div id="divbba">
<div id="divbbaa">
<div id="divbbaaa" class="classb draft">
Draft
</div>
</div>
</div>
</div>
</div>
I'm using Protractor with Cucumber for my tests, but I can't get an element cause the classname is the same of others classes and it don't have other attribute.
How can i get this element?
The element is: "tileGrid content".
I can't use xpath cause the page is edited sometimes.
Here my html:
<div class="tileGrid content">
<div class="spacing-container undefined">
<div class="title">
<h3 class="h2 heading">External Services</h3>
</div>
</div>
</div>
Thank you for your help.
I'm imagining your structure to be something similar to:
<div>
<div class="tileGrid content">
<div class="spacing-container undefined">
<div class="title">
<h3 class="h2 heading">External Services</h3>
</div>
</div>
</div>
<div class="tileGrid content">
<div class="spacing-container undefined">
<div class="title">
<h3 class="h2 heading">Other Header</h3>
</div>
</div>
</div>
<div class="tileGrid content">
<div class="spacing-container undefined">
<div class="title">
<h3 class="h2 heading">Another Header</h3>
</div>
</div>
</div>
...
</div>
There are a few ways you could interact with something like this, but I'll give just 3 examples:
This will look for the first child with the div tag within its parent
by.css('div div.content:nth-of-type(1)')
This will look for the first child with any tag within its parent
by.css('div div.content:nth-child(1)')
This will look for the text inside the h3 tag, and will select the element 3 layers above it:
by.xpath('//*/h3[text()="External Services"]/../../..')
Or find a DIV which includes a H3 and the H3's text is External Services as following:
by.xpath('//div[contains(#class, "tileGrid")][.//h3[text()="External Services"]]')
I'm using Tabulous.js script with NanoScroll.js
Here is my code :
<div id="tabs_container" class="nano">
<div id="tabs-1" class="overthrow content">
short text
</div>
<div id="tabs-2" class="overthrow content">
very long text
</div>
</div>
and
<script type="text/javascript">
$(function () {
$(".nano").nanoScroller({scroll: 'top'});
}
</script>
As the first content is short, nano is not used, but for the second content, it should appears.
Content is a class, that's why I though we could use multiple contents. Am I wrong ?
Any advises on this ?
Thanks in advance
You have only one "nano" class but two content classes.
For every scrolling on your page, you need two of the both classes.
So you may need something like this:
<div id="tabs_container" class="nano">
<div id="tabs-1" class="overthrow content">
short text
</div>
</div>
<div id="tabs_container_2" class="nano">
<div id="tabs-2" class="overthrow content">
very long text
</div>
</div>
Or somethink like this:
<div id="tabs_container" class="nano">
<div class="content">
<div id="tabs-1" class="overthrow">
short text
</div>
<div id="tabs-2" class="overthrow">
very long text
</div>
</div>
</div>
Majorly stuck here and would love some help. I am trying migrate the hidden div content of a particular topic to a separate area when it's specific title is clicked. At the minute I can get the content to migrate but instead of the specific topic content it just cycles through the content upon clicking.
Sorry for my poor Title, I'm struggling to define my exact problem. Please change if you feel you can do better.
http://jsfiddle.net/vBCs5/1/
Clicking the grey subtitles migrates the content.
Thank you in advance.
Jquery:
$(document).ready(function() {
$(".freemarker-wrap div").hide();
$(".test").click(function () {
$(".freemarker").each(function () {
var working = $(this).contents();
var ref = $(".content-box").contents();
$(this).append(ref);
$(".content-box").append(working);
});
});
});
HTML
<html>
<body>
<div class="page-wrap">
<div class="left-column-wrap">
<h1>FreeMarker +</h1>
<div class="freemarker-wrap">
<span class="test">
<h2>Lucene Call ></h2>
<div class="freemarker">
<p>Click to hide stories</p>
</div>
</span>
<span class="test">
<h2>Arrays ></h2>
<div class="freemarker">
<p>Arrays</p>
</div>
</span>
<span class="test">
<h2>Declaring and outputting variables ></h2>
<div class="freemarker">
<p>Declaring</p>
</div>
</span>
<span class="test">
<h2>IF Statements ></h2>
<div class="freemarker">
<p>Statements</p>
</div>
</span>
<span class="test">
<h2>Fragments ></h2>
<div class="freemarker">
<p>Fragments</p>
</div>
</span>
<span class="test">
<h2>Working with Numbers ></h2>
<div class="freemarker">
<h3>Numbers</h3>
</div>
</span>
<span class="test">
<h2>Current Date ></h2>
<div class="freemarker">
<p>Current</p>
</div>
</span>
</div>
<div class="javascript-wrap">
<h1>JavaScript +</h1>
</div>
<div class="javascript-wrap">
<h1>JQuery +</h1>
</div>
<div class="javascript-wrap">
<h1>HTML +</h1>
</div>
<div class="javascript-wrap">
<h1>CSS +</h1>
</div>
</div>
<div class="content-box">
</div>
</div>
</body>
</html>
assuming this is what your are asking for...
$(document).ready(function() {
$(".freemarker-wrap div").hide();
$(".test").click(function () {
var working=$(this).find(".freemarker").html(); // get that particular <span> html
$(".content-box").html(working); <migrate it to content
});
});
fiddle here
I think you're over complicating it ;)
$(document).ready(function() {
$(".freemarker-wrap div").hide();
$("span.test").click(function () {
$(".content-box").html( $(this).find("div.freemarker").html() );
});
});