So when I run the following code, I click on a div, and another div slides out.
<div class="section" id="1">Hi</div>
<div class="under" id="1">Hola</div>
<div class="section" id="2">Foo bar</div>
<div class="under" id="2">Derp</div>
</td></table>
</td></table>
<script>
$(".section").click(function(){
var id = this.id;
$(".under").slideToggle("slow");
});
But, when I click on the div with the class "section", it shows ALL of the divs with the class "under." What I want to do is show the div "under" with an id that is equal to the id of the div selected (i.e. show "under" with id="1" when "section" with id="1" is clicked). How would I do this?
use
.next('div');
so whole code would be
<style>
.under{
display:none;
padding:5px;
background-color:gray;
}
</style>
<div class="section" id="1">Hi</div>
<div class="under" id="1">Hola</div>
<div class="section" id="2">Foo bar</div>
<div class="under" id="2">Derp</div>
<script>
$(".section").click(function(){
$(this).next('div').slideToggle("slow");
});
</script>
working demo
You can use .next, or depending on how you have things setup, .nextAll. Here is a short demo i did for a question similar to this:
http://jsfiddle.net/andresilich/AeGSQ/
Ok there are a few things wrong with your HTML; I will go through them one by one.
There is no opening <table> or <td> tag. This will result in invalid HTML.
There should be a <tr> tag containing the td tag. It is structurally incorrect as it is at the moment.
I am thinking you're using tables for layout; tables should be used for data-display only, not for page layout.
You have multiple ids the same. The idea of an id is that it identifies one element and one element only. Classes are used to style multiple elements the same.
I have rewritten your code at http://jsfiddle.net/FS3rt/. It also contracts any visible sections so that the user is presented only with the information they would like to see.
Related
I'm new to Javascript DOM so I need a little bit of help walking through the basics before I can get going - I have an HTML file like this:
<div id="content">
<h1>FOREST SIMULATOR</h1>
<div id="intro">
starting forest (leave empty to randomize):
<br />
<textarea id="inputForest" name="inputForest" cols="16" rows="8"></textarea>
<br />
<button>generate</button>
</div>
<div id="sim" class="hidden"></div>
<div id="pushtray" class="overlay"></div>
</div>
I want to only show the content in the div with id="intro", making sure that the .overlay and #sim div are not displayed. I would need to make appropriate CSS rules and use Javascript's element.add, remove, and contains so I can control which CSS rules are active.
I'm not entirely sure what this means and how it would look like.
What am I doing in my CSS file exactly?
If you don't want to display the div elements with id "overlay" and "sim" you can write it as:
document.getElementById("sim").style.display="none";
document.getElementById("pushtray").style.display="none";
The following css hides all div elements in the content div. After that it will show the intro div.
Bound a click function to the "generate" button with Javascript to hide the intro div and show the sim div.
With some alterations you should be able to make it work to your liking.
//Wait for the dom to finish loading
document.addEventListener("DOMContentLoaded", function(){
//then bind a click event handler to all the buttons inside the div with the id intro
document.querySelector("div#intro button").addEventListener("click", function(){
//hide the intro div and show the sim div when the button is clicked
document.getElementById("intro").style.display = "none";
document.getElementById("sim").style.display = "block";
});
});
div#content div {
display: none;
}
div#content div#intro {
display: block;
}
<div id="content">
<h1>FOREST SIMULATOR</h1>
<div id="intro">
starting forest (leave empty to randomize):
<br />
<textarea id="inputForest" name="inputForest" cols="16" rows="8"></textarea>
<br />
<button>generate</button>
</div>
<div id="sim" class="hidden">lalala</div>
<div id="pushtray" class="overlay">lalala</div>
</div>
You should give the class hidden to any element you dont want visible (you can have any number of classes on an element), and then add a css rule that hides them:
<style>
.hidden{
display:none;
}
</style>
Then if you want to show these hidden element when some sort of action is taken, you use javascript to add and remove the hidden class respectively.
var element = document.getElementById("sim");
element.classList.remove("hidden")
This code hides the 'overlay' and 'pushtray' elements:
document.getElementById('overlay').style.display = 'none';
document.getElementById('pushtray').style.display = 'none' ;
This code hides only the content of the 'overlay' and 'pushtray' elements, but the elements are still "reserve" place in your page.
document.getElementById('overlay').style.visibility = 'hidden';
document.getElementById('pushtray').style.visibility= 'hidden' ;
i have dynamic data in my rails view, all divs have the same name; 'allData', which has alot of info, so i have it not displayed, i want to display that specific div and not all divs when i click show, but it shows all divs, i want to be able to show just that target div i clicked
$('.show'').on('click', (event) =>{
$('.allData').toggle();
$(event.currentTarget).closest('.allData').toggle();
})
<div class='eachData'>
<div class='header'>
<div class='show'> show</div>
<div class='numberOfdata'> 100</div>
</div>
<div class='allData; display:none'>
"foobar all data is here"
</div>
</div>
<div class='eachData'>
.......
</div>
<div class='eachData'>
.......
</div>
Your closest call is on the right track but you're not quite using it right. First you want to find the container (.eachData) that contains your <div class="show">, you use closest for that:
let container = $(event.currentTarget).closest('.eachData');
then you search within that container for the .allData you want to toggle by using find:
container.find('.allData').toggle();
So you use closest to go up the node tree and then find to come back down.
BTW, this:
<div class='allData; display:none'>
should be:
<div class="allData" style="display: none">
The class attribute contains CSS class names delimited by whitespace, raw CSS goes in the style attribute and is delimited by semicolons.
Your inline style on the div should be as follows:
<div class="allData" style="display: none">
Then try the following:
$('.show').on('click', function() {
$(document).find('.eachData .allData:visible').hide('fast');
$(this).parent().closest('.allData').show('fast');
});
I want to target a table which is outside of the element I'd like to use as a 'trigger' and then give it an additional class.
<div>
<table class="table"></table>
</div>
<div></div>
<div class="trigger">
<!---content open--->
</div>
The class "trigger" only appears when that div is open, so when it's open and the class is added, I want to target the table directly above it, and ONLY that table. The problem is that the table class "table" appears more than once on the page and there is always a further div between the two elements. How would I select only that one table directly before?
Given your HTML structure, where the table you're trying to match is a child of a sibling node to trigger:
Get all the preceding siblings of trigger with prevAll(), search within them for a .table with find(), and keep the last one in the resulting match.
var preceding = $('.trigger').prevAll().find('.table').last();
$(preceding).addClass('match'); // for demo, so you can see what matched
.match {
color: #F00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<table class="table"><tr><td>Don't want this table</td></tr></table>
</div>
<div>
<table class="table"><tr><td>Do want this table</td></tr></table>
</div>
<div>This sibling doesn't have a table</div>
<div class="trigger">This is the trigger</div>
<div class="table">Don't want this div</div>
<div>
<table class="table"><tr><td>or this table</td></tr></table>
</div>
This is pretty fragile. If possible, consider using specific classnames or IDs instead of depending on document order.
If I understood you correctly, you want to add a class to your table, right? If this is the case, you could add an id to the only table you want to modify and then use addClass.
<script>
//perform condition checking
$("#myTableID").addClass("class_to_add");
</script>
...
<div>
<table id="myTableID"></table>
</div>
<div></div>
<div class="trigger">
<!---content open--->
</div>
I have the next code dynamically created using JQuery. Theere are multiple row class divs placed one under the other.
<div class="row">
....
</div>
<div class="row">
<div class="line_type"></div>
<div class="download_value"></div>
<div class="flag"></div>
<div class="email"></div>
<div class="prize"></div>
</div>
<div class="row">
....
</div>
After i create these divs I have a "pointer" to a specific div which is of class row. In JQuery, how do i make it so I go down the DOM tree, until i reach the div of class line_type and download_value and remove them both, and also I'd like to go one more node down, at the div of type email and change some of it's CSS attributes.
I was not able to find anything on the web, maybe it's cause i'm a noob at these still.
I have a "pointer" to a specific div which is of class row ->
Assuming that you have the this object of the corresponding div with class row.. then you can use .find to get the line_type and download_value inside that div.
$(this).find('.line_type').remove();
$(this).find('.download_value').remove();
Then you can use the same .find to get the div with class email and access the .css
$(this).find('.email').css(/* You code*/);
Assuming row_pointer points to the row in question:
$('.line_type, .download_value', row_pointer).remove();
$('.email', row_pointer).css(...);
check this out
$('div.row').bind('click', function() {
$this = $(this);
$('div.line_type, div.download_value', $this).remove();
$('div.email', $this).css('background-color', 'red');
});
http://jsfiddle.net/YvyE3/
<div id=klik>KLIK </div>
<div class="list">
<div class="list-wrapper">
<div class="line">1</div>
<div class="line">2</div>
</div>
<div class="line">3</div>
<div class="line">4</div>
</div>
This is the Html. I use Javscript to hide the whole list first. Then I would like to make a onclick function to show just the first two elements, the two in div list wrapper. This the code i have written.
$(document).ready(function(){
$(".list").hide();
$("#klik").click(function(){
$(".list-wrapper").show();
});
});
The problem it never shows the elements.
You are trying to show an element that is still wrapped inside a hidden parent element. In case you hide and show the same selection it is working just fine. You could do it like this:
$(document).ready(function(){
$(".list").hide();
$("#klik").click(function(){
$(".list").show().children().not('.list-wrapper').hide(); //show .list, then hide everything that is not inside .list-wrapper
});
});
Working demo
EDIT:
And fix your HTML markup (missing quotes "" ) <div id=klik>KLIK</div>
You are hiding the parent element of what you are trying to show. show will only display the elements you called it on, it won't cascade up the DOM tree.
$(document).ready(function(){
$(".list").hide();
$("#klik").click(function(){
$(".list").show(); //Show .list elements instead
});
});