javascript - Toggle individual divs in a loop -
In submitting data within HTML, which prints a div in the page, for every row found in the database , Clicking on each button to toggle every design, trying to find a way to allow each button to sit (with the default of An example of the last markup: First rule, do not insert multiple elements with the same ID. The button you clicked needs to toggle the example, and to get it to show / hide any (or all) I will put Another important thing : If the JavaScript client-side has been disabled, then users will never be able to see your example because they are hidden by default in CSS Are there. A fix will hide with JS in the beginning (see snippet for this). Here's a demonstration of what I mean: display: none when loading the page) - Something like this:
function toggle_dive (id) {var divelement = document.getEleme ntById (id); If (division.style.development == 'none') divelement.style.display = 'block'; Other divelement.style.display = 'none'; }
& lt; Div & gt; & Lt; Div class = "virtual" & gt; Word & lt; / Div & gt; & Lt; div class = "numbers" & gt; 1 & lt; / Div & gt; & Lt; div class = "definition" & gt; Definition & lt; / Div & gt; & Lt; Button class = "button" id = "show_example" onClick = "toggle_div ('example')" & gt; Show example & lt; / Button & gt; & Lt; Div class = "example" id = "example" & gt; Example 1 & lt; / Div & gt; & Lt; / Div & gt; & Lt; Div & gt; & Lt; div class = "virtual" & gt; Word & lt; / Div & gt; & Lt; div class = "numbers" & gt; 2 & lt; / Div & gt; & Lt; div class = "definition" & gt; Definition & lt; / Div & gt; & Lt; Button class = "button" id = "show_example" onClick = "toggle_div ('example')" & gt; Show example & lt; / Button & gt; & Lt; Div class = "example" id = "example" & gt; Example 2 & lt; / Div & gt; & Lt; / Div & gt;
getElementById () toggles only the instance of the first div, and
getElementsByClass () does not work so far - neither Be sure to do this - appreciate any thoughts very much!
.example For you, using the [jquery] tag in your question, you can either use a selector to get the nearest
.example to your button or to get it jQuery You can use the underlying function of (
.siblings () ).
onclick with my markup individually, and I will tie this custom function in my javascript.
$ ('example-trigger'). Click (function () {// use the current button, which triggered the event $ (this) // Toggle the brochure of a particular class. ('.example-label') // Previous element Toggle according to the display status (hide or show). Toggle ();}); // Encourage: Hide examples only if Javascript is enabled // $ ('example-label'). Hide ();
.example-label {display: none; / * Disappointed: If JavaScript is disabled, then user will not see anything. /
& lt; Script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" & gt; & Lt; / Script & gt; & Lt; Div & gt; & Lt; Button class = "example-trigger" & gt; Toggle Example 1 & lt; / Button & gt; & Lt; span class = "example-label" & gt; Example 1 & lt; / Span & gt; & Lt; / Div & gt; & Lt; Div & gt; & Lt; Button class = "example-trigger" & gt; Toggle example 2 & lt; / Button & gt; & Lt; span class = "example-label" & gt; Example 2 & lt; / Span & gt; & Lt; / Div & gt; & Lt; Div & gt; & Lt; Button class = "example-trigger" & gt; Toggle Example 3 & lt; / Button & gt; & Lt; Span class = "example-label" & gt; Example 3 & lt; / Span & gt; & Lt; / Div & gt;
Comments
Post a Comment