I want to open a another <tr> tag when first <tr> is click.
The code is :
<tr class="msg_inner">
<td><label>some text</label></td>
<tr id="full_msg" style="display:none">
<td><label>Hey There.....</label></td>
</tr>
</tr>
script
$('.msg_inner').click(function(){
$('#full_msg_'+no+'').toggle("slow");
});
it display block but all is open at same time. I want to display that block after <tr> is click.
Don't use another <tr>.
Just add a <div> in your td and simply show him like that
HTML :
<table>
<tr class="line">
<td>
Hi there !!
<div class="detail">
More info here...
</div>
</td>
</tr>
<tr class="line">
<td>
Hi there !
<div class="detail">
More info here...
</div>
</td>
</tr>
<tr class="line">
<td>
Hi there !
<div class="detail">
More info here...
</div>
</td>
</tr>
</table>
CSS
.detail{
display:none;
}
JQuery
$(".line").click(function(){
$(this).find(".detail").toggle();
});
Working Fiddle here
you can try this one:
var x=0;
$(".line").click(function(){
if((x%2)==0)
{
$(this).find(".detail").show();
}
else
{
$(this).find(".detail").hide();
}
x++;
});
DEMO HERE
Or
Toogle Method
$(".line").click(function(){
$(this).find(".detail").toggle(1000);
});
DEMO HERE
Related
This is my table, of course with some text in it, and I want on a button click to hide it, and show some images. I also want to reverse the action on the same button click. How can I do that?
<div id="aspect" style="display:yes">
<table style="100%" id="Table">
<tr>
<th id="textul" > </th>
<th id="textul4"> </th>
</tr>
<tr>
<td id="testul2and3" style="vertical-align:top"> </td>
<td style="vertical-align:top" id="textul6">
<p> <iframe></iframe> </p>
</td>
</tr>
</table>
</div>
you can start with jQuery .toggle() method
$("button").click(function(){
$("img").toggle();
});
this will work as you need
Have a look here: http://api.jquery.com/toggle/
Please have a look at this code sample. I have used jQuery 2.1.1
$(function() {
$('#toggler').click(function() {
$('#Table').toggle();
$('#imageblock').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="aspect">
<div style="display:none;" id="imageblock">
<img src="http://lorempixel.com/400/200/" />
</div>
<table id="Table">
<tr>
<th id="textul" > </th>
<th id="textul4"> </th>
</tr>
<tr>
<td id="testul2and3" style="vertical-align:top"> </td>
<td style="vertical-align:top" id="textul6">
<p> <iframe></iframe> </p> </td>
</tr>
</table>
</div>
<button id="toggler">Toggle Image/Table</button>
I have a link in my HTML that I want to trigger using a click event in jQuery. This content is generated with AJAX. I know that I'm supposed to use .on, so that's what I'm doing. My code does fire on the td when I use this code:
$(".onestepcheckout-summary").on("click", ".wider", function() {
alert('success');
return false;
});
But it's supposed to fire on the anchor tag with the class addsqty. I've tried multiple things like changing the .wider to .wider > a and .wider > .addsqty or simple .addsqty. Why doesn't this work?
Here is my HTML. The AJAX loaded content starts with <table class="onestepcheckout-summary">.
<div class="onestepcheckout-summary">
<table class="onestepcheckout-summary">
<thead>
<tr>
<th class="name" colspan="2">Artikel</th>
<th class="qty">Stück</th>
<th></th>
<th class="total">Zwischensumme</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name">
Simpel product </td>
<td class="editcart">
-
</td>
<td class="qty" nowrap="">
<input type="hidden" value="5" id="qty_46" name="cart[46][qty]" class="qtyinput" size="1">
5 </td>
<td class="editcart wider" nowrap="">
+
</td>
<td class="total">
<span class="price">€ 10,00</span> </td>
</tr>
</tbody></table>
<table class="onestepcheckout-totals">
<tbody><tr>
<td style="" class="a-right" colspan="1">
Zwischensumme </td>
<td style="" class="a-right">
<span class="price">€ 145,00</span> </td>
</tr>
<tr>
<td style="" class="a-right" colspan="1">
<strong>Gesamtbetrag</strong>
</td>
<td style="" class="a-right">
<strong id="total-price"><span class="price">€ 145,00</span></strong>
</td>
</tr>
</tbody></table>
</div>
dynamic content never got the click event :
for this you need to use on , bind and delegate:
i always prefer Delegate. Try This :
$("body").delegate(".wider", "click", function() {
alert('success');
return false;
});
You could try in such a way also
$(document).on("click", '.onestepcheckout-summary',function (event) {
// whatever u want ...
});
Change parent div classname also , it seems like both have same class name.
<div class="div-class">
<table class="table-class">
......
</table>
</div>
$('.div-class').on("click", '.onestepcheckout-summary',function (event) {
// whatever u want ...
});
Can someone point out why this isn't working? I'm trying to click on Div A within a Container Div, and on click, go up to the parent container, find the next Div B, and toggle its visibility.
Note: The reason I'm doing it like this is I don't want to show ALL divs with the "child" class. Only the next one after the parent div.
http://jsfiddle.net/vecalciskay/54HxU/5/
HTML:
<div class="container">
<div class="parent">
<span> Parent Text (click) </span>
</div>
<div class="child">
<table>
<tr>
<td>
This
</td>
<td>
Table
</td>
</tr>
<tr>
<td>
Should
</td>
<td>
Expand
</td>
</tr>
</table>
</div>
<div class="parent">
<span> Parent 2 (don't click) </span>
</div>
<div class="child">
<table>
<tr>
<td>
This
</td>
<td>
Table
</td>
</tr>
<tr>
<td>
Should Not
</td>
<td>
Expand
</td>
</tr>
</table>
</div>
JQUERY:
$(document).ready(function () {
$('.child').hide();
$('.parent').click(function () {
var obj = $(this).parent().next(".child");
obj.toggle("fast");
return false;
});
});
Thanks to all the comments, I realized I was misinterpreting the siblings. Problem solved!
I'm actually having the same problem like as in How to prevent jQuery .toggle() to show/hide all within .on 'click' but it didn't help so I'm making my own question.
Is there anyway to prevent toggle to show all but instead show only the neccesary toggle for the user to click? (extra topping -> extra_toppings selected) I did try with my minimum knowledge of using IDs as well this, next(), parents() but with no success.
Here's my code:
JavaScript
$(".extra_topping").click(function() {
$(".extra_toppings").toggle('slow');
});
HTML
(inside a loop over all foods: #foods.each do |food| ...)
<div class="extra_topping">
<a>Click Me!</a>
</div>
<div class="extra_toppings">
<a> Show </a>
</div>
I shortened to original HTML to just this to simplify the problem.
Here are my actual code look like : (without the rails code)
<table class="table">
<thead >
<tr>
<th>Name</th>
<th>Price</th>
<th>Category</th>
<th>Quantity</th>
<th>Actions</th>
<th>Additional Menu</th>
</tr>
</thead>
<tbody>
<tr>
<td>
</td>
<td id="food" style="font-weight:bold;">
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
<div class="extra_topping">
<a>Click me!</a>
</div>
</td>
</tr>
<tr class="extra_toppings">
<td>
</td>
<td colspan="4">
<div class= "mediocre">
<div class= "xaxixo">
<h6>Our Additional Menu</h6>
</div>
<div class="extra_topping">
</div>
<table class="mediocre_table">
<tr>
<td>
<div class="full_mediocre">
<div class="mediocre_collumn">
</div>
</div>
</td>
</tr>
</table>
</div>
</td>
<td>
</td>
</tr>
</tbody>
You could use:
$(".extra_topping").click(function(){
$(this).next('.extra_toppings').toggle('slow');
});
If that was what your markup always looked like, e.g.
<div class="extra_topping">
<a>Click Me!</a>
</div>
<div class="extra_toppings">
<a> Show </a>
</div>
<div class="extra_topping">
<a>Click Me!</a>
</div>
<div class="extra_toppings">
<a> Show </a>
</div>
jsFiddle here.
I'm finally make it work by changing the code from:
$(".extra_topping").click(function(){
$(this).next('.extra_toppings').toggle('slow');
});
into:
$(".extra_topping").click(function(){
$(this).parents('tr').next().toggle('slow')
});
It Works!
I am playing around with the JavaScript functions insertAfter and insertBefore, however I am trying to insertAfter and insertBefore two elements.
For instance, consider the following HTML:
<table>
<tbody>
<tr>
<td>
Item 1
</td>
<td>
<div class="moveUpDown">
<div class="up">
</div>
<div class="down">
</div>
<div>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<table>
<tr>
<td>
1
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
Item 2
</td>
<td>
<div class="moveUpDown">
<div class="up">
</div>
<div class="down">
</div>
<div>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<table>
<tr>
<td>
1
</td>
</tr>
</table>
</td>
</tr>
</table>
Then I have this JavaScript code snippet:
var row = $(this).parents("tr:first");
if ($(this).is(".up")) {
row.insertBefore(row.prev());
} else {
row.insertAfter(row.next());
}
Basically when the Up class is called, the previous row is moved up and when the Down class is called, the current row is moved down one row.
What I want to do, is move the rows Up/Down 2 rows... meaning something like row.prev().prev() or row.next().next() however this does not seem to work.
Is there an easy way around this?
Would appreciate any help/suggestions.
to go up
row.prev().prev().before(row)
to go down
row.next().next().after(row)
obviously the tr must exist prev/next have to exist
NB you are caching row as the first tr element so row is changing every time the first tr element change
listen to event
$("table").on("click","tr > td > span.moveup", function() {
var row = $(this).parent().parent();
if (row.prev().prev().get(0)) row.prev().prev().before(row)
})