I have a table structured like that:
<table id="example">
<thead>
<tr>
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
</tr>
</thead>
<tbody>
<tr>
<td>some php to get custom field</td>
<td>also custom field- the loop is above so this is working as it should</td>
<td>
<a href="#" class="showhide">
<div class="more">
.. the content I want to show when user clicks a class="showhide"
</div>
</a>
</td>
<tr>
</tbody>
</table>
I tried to implement with jQuery, but nothing happens. This is the jQuery I tried:
$(function () {
$('.showhide').click(function () {
$(this).next().toggle()
});
});
I also make it with document.ready and still not working. Is there any other way to do that?
All I want is that the content of the div class="more" is to be shown under the row in the table (and in front of the next one), of course when the a class="showhide" is clicked.
I am using this together with plugin DataTables, but this is not causing problems.
The class you have is showmore not showhide
Live Demo
$(function() {
$('.showmore').click(function(){
$(this).next().toggle()
});
});
Edit based on OP comments: I have shorten the html to make it simple and took div out of a tag.
Live Demo
Html
<table id="example">
<tbody>
<tr>
<td> Show / Hide
<div class="more">.. the content I want to show when user clicks a class="showmore"</div>
</td>
</tr>
</tbody>
</table>
Javascript
$(function () {
$('.showhide').click(function () {
$(this).next().toggle()
});
});
Either change this in the markup:
class="showmore">
to this:
class="showhide">
or do this:
$('.showmore').click(function (e) {
e.preventDefault();
$(this).next().toggle()
});
Note:
This is invalid html:
<a href="#" class="showhide">
<div class="more">
.. the content I want to show when user clicks a class="showhide"
</div>
change to this:
show more
<div class="more">
.. the content I want to show when user clicks a class="showhide"
</div>
or you can try this one with .children() not with .next():
$('.showmore').click(function (e) {
e.preventDefault();
$(this).children('more').toggle();
});
TRYOUT IN FIDDLE HERE
$(document).on('click','.showmore',function(){
//your code..
})
Related
I'm brand new to Javascript, and need some help. I have a table with 4 rows (3 displayed, and 1 display="none"). What I'm trying to do is display the 4th row via clicking on a link. Here's what my HTML looks like:
<table class="lessons">
<tr>
<td class="chapter">01</td>
<td class="title-desc"><h3 class="title">INTRODUCTION TO PROGRAM</h3>
<h3 class="desc">Program description....blah blah blah...</h3>
</tr>
<tr>
<td class="chapter">02</td>
<td class="title-desc"><h3 class="title">PARTNER WITH THE PROGRAM</h3>
<h3 class="desc">Description for chapter 2....blah blah...blah...</h3>
</tr>
<tr>
<td class="chapter">03</td>
<td class="title-desc"><h3 class="title">FOCUS ON THE PROGRAM</h3>
<h3 class="desc">Description for chapter 3...blah blah blah....</h3>
</tr>
<tr class="hiddenRow" style="display:none;">
<td class="chapter">04</td>
<td class="title-desc"><h3 class="title">THIS CHAPTER IS HIDDEN</h3>
<h3 class="desc">Chapter four description....blah blah...</h3>
</tr>
</table>
show hidden
And here's my javascript:
function showRows(){
var thisRow = document.getElementsByClassName('hiddenRow');
thisRow.style.display="";
}
Link to JSFiddle:
https://jsfiddle.net/99600cha/
I've tried doing the javascript function a few different ways with no success. Could someone show me what I'm doing wrong?
What I'm really trying to do is have the first and last rows displayed with the middle rows hidden and expandable, like this:
Chapter 1
(click to see all chapters)
Chapter 10
so if anyone can point me to something similar, please do!
Edit: Here is a link that shows the exact effect I'm trying to accomplish: https://www.masterclass.com/classes/aaron-sorkin-teaches-screenwriting
if your are using jquery:
function showRows(){
$('.hiddenRow').hide();
}
In var thisRow = document.getElementsByClassName('hiddenRow'); thisRow returns an array of elements that have such class, you have to use thisRow[0] to select a first element.
However, a more elegant and cleaner solution would be making this layout:
<div class="lessons" id="lessons">
<div class="lesson">
<div class="chapter">01</div>
<div class="title">...</div>
<div class="whatever">...</div>
<div class="whatever">...</div>
</div>
<div class="lesson">
<div class="chapter">01</div>
<div class="title">...</div>
<div class="whatever">...</div>
<div class="whatever">...</div>
</div>
<div class="lesson-hidden">
<div class="chapter">A hidden lesson.</div>
<div class="title">...</div>
<div class="whatever">...</div>
<div class="whatever">...</div>
</div>
</div>
By using this simple CSS rule you will be able to hide all elements by changing a single class:
.lessons .lesson-hidden { display: none; }
.lessons.full .lesson-hidden { display: block; }
To show hidden lessons, use this line:
document.getElementById("lessons").classList.add("full")
To revert, use this line: document.getElementById("lessons").classList.remove("full")
I trying to change the content of my webpage using query. I have the following code, like this:
<div class="container" id="index">
<div class="table-responsive container selecoes" >
<table class="table">
<tbody id="selecaoList">
<td>
Brasil
</td>
</tbody>
</table>
</div>
<div class="container" id="selecoes">
<p>show something</p>
<div>
...
<script>
$(document).ready(function(){
$( "#selecoes" ).hide();
$("#selecoes a").click(function() {
$( "#index" ).hide();
$("#selecoes").show();
});
});
</script>
When I open the page, the first div is shown and it´s fine but when I click in Brasil, don't replace(hide) the <div id ="index"> to <div id="selecoes"> to show the element <p>.
So I want to hide the first div and show the second div in place of the first one.
Step 1: Set right selector on click function
Step 2: Close div tag of #index
Here is working code:
<div class="container" id="index">
<div class="table-responsive container selecoes" >
<table class="table">
<tbody id="selecaoList">
<td>
Brasil
</td>
</tbody>
</table>
</div>
</div>
<div class="container" id="selecoes">
<p>show something</p>
<div>
<script>
$(document).ready(function(){
$( "#selecoes" ).hide();
$("#selecaoList a").click(function() {
$( "#index" ).hide();
$("#selecoes").show();
});
});
</script>
Your selector for the click event is wrong. Must be:
$("#selecaoList a").click(function() ...
The click function is on wrong selector. Use this code:
$("#selecaoList a").click(function () {
$("#index").hide();
$("#selecoes").show();
});
i writing simple script to popup quick info using jquery. When user click view, some info will show using toggle() and hide when user click again. And this script will loop 10 times.
But the problem is i want this popup only show one time and the rest will hide, now when user click view 1 and view 2 all popup will show at same time.
You can check my jsFiddle click here
<script>
$(document).ready(function() {
$("#view_1").click(function(e) {
e.stopPropagation();
$(".box_1").toggle();
});
$(document).click(function() {
var $el = $(".box_1");
if ($el.is(":visible")) {
$el.fadeOut(200);
}
});
});
</script>
*im not sure how to combine this script in one function
Here is your working demo
$("a").click(function() {
$('.contact_box').hide();
$(this).next('div').show();
});
use hide() to hide your corresponding box..
$("#view_1").click(function(e) {
e.stopPropagation();
$(".box_2").hide(); <-----here
$(".box_1").toggle();
});
$("#view_2").click(function(e) {
e.stopPropagation();
$(".box_1").hide();<-----here
$(".box_2").toggle();
});
fiddle here
should be :
before $(".box_1").toggle(); this hide $(".box_2").hide(); and before $(".box_2").toggle(); this hide $(".box_1").hide();
This will works.
Hi Use the code below,
<script>
$(document).ready(function() {
$("#view_1").click(function(e) {
e.stopPropagation();
$(".box_1").toggle();
var $el = $(".box_2");
if ($el.is(":visible")) {
$el.fadeOut(200);
}
});
$(document).click(function() {
var $el = $(".box_1");
if ($el.is(":visible")) {
$el.fadeOut(200);
}
});
});
</script>
Hope this solves your problem
Toggle also has callback function you can use it.
$(".box_1").toggle('slow', function() {
// show hide code or fadeIn fadeOut or other animation
$(".box_2").fadeOut('fast');
});
Try this:
<div style="position:relative">
<a style="cursor: pointer" id="view_1" class="my_view">View 1</a>
<div class="contact_box box_1 content_box" style="display: none;">
<div class="left" style="width:150px; margin-right:10px;">
<img src="http://www.dunking-devils.com/images/samsung-logo_100x100.jpg"
style="max-width:150px" />
</div>
<div class="contact_info left" style="width:250px">
<div class="company_name">DIV A</div>
<table width="100%" border="0" class="table_contact">
<tr>
<td width="29">Name</td>
<td>: Jenson Button</td>
</tr>
<tr>
<td style="padding-right:0px">Phone</td>
<td>: 012-66558741</td>
</tr>
<tr>
<td style="padding-right:0px">Email</td>
<td>: jb#gmail.com</td>
</tr>
</table>
</div>
</div>
</div>
<br>
<br>
<div style="position:relative">
<a style="cursor: pointer" id="view_2" class="my_view">View 2</a>
<div class="contact_box box_2 content_box" style="display: none;">
<div class="left" style="width:150px; margin-right:10px;">
<img src="http://www.dunking-devils.com/images/samsung-logo_100x100.jpg"
style="max-width:150px" />
</div>
<div class="contact_info left" style="width:250px">
<div class="company_name">DIV B</div>
<table width="100%" border="0" class="table_contact">
<tr>
<td width="29">Name</td>
<td>: Jenson</td>
</tr>
<tr>
<td style="padding-right:0px">Phone</td>
<td>: 012-88542215</td>
</tr>
<tr>
<td style="padding-right:0px">Email</td>
<td>: ac#gmail.com</td>
</tr>
</table>
</div>
</div>
</div>
$(document).ready(function() {
$('.my_view').click(function(e) {
$('.my_view').siblings('div').each(function(){$(this).hide()});
$(this).siblings('div').toggle();
e.stopPropagation();
});
$(document).click(function() {
$('.my_view').siblings('div').fadeOut(200);
});
});
I'm currently creating a page at this link. I'm using this javascript in my header (below my CSS):
<script type="text/javascript" src="http://static.tumblr.com/txc9jrr/yNxmd3lq6/jquery.js">
</script>
<script type="text/javascript">
$('.toggle').click(function(){
var $tr = $(this).closest('tr');
$tr.add($tr.next('.edit')).toggle();
});
$('.cancel').click(function(){
var $tr = $(this).closest('tr');
$tr.add($tr.prev('.view')).toggle();
});
</script>
and this HTML:
<table>
<tr class="view">
<td>
<a class="toggle" class="icon-button" href="#">Edit</a>
</td>
</tr>
<tr class="edit" style="display:none">
<td>
hi
<a class="cancel" href="#">Cancel</a>
</td>
</tr>
</table>
In theory, it should work... However when I implement it into my page, it ceases to function. Does anyone have a clue as to what my problem is?
change
<a class="toggle" class="icon-button" href="#">Edit</a>
// ^--------------^---------------------Cannot define two classes like this
to
<a class="toggle icon-button" href="#">Edit</a>
// ^--------------------------------Try like this
DEMO
I think you should try this
$('.toggle').click(function(){
if ($(".edit").css('display') == 'none') {
$(".edit").css('display', 'block');
}
}
i think this will help you
how can I use jquery to get the text inside of a td?
I currently have:
<div id="divName">
<table id="tableName">
<tr>
<td id="g${req.Name}</">${req.Name}</td>
<td><input type="button" id="showName_${req.fName} rel="viewName_${allReq.requestId}
value="Show " title="Show customer ${req.fName}"
onclick="buttonToggle(this,'Hide ','Show ','nameDiv_${req.fName}', '${req.fName}')" />
</td>
</tr>
</table>
<div id="nameDiv_${req.fName}" style="display: none">
<p>test</p>
</div>
</div>
I would like to be able to have the title of the show/hide button say Show customer John and when the button is clikced to hide for the title to change to Hide customer John and then when the button is clicked again to go back to the title to say show customer John.
I was able to use something like this for the show/hide button:
$('ShowHide').click(function(){
if ( $('hide').css('display') == 'block' )
$('ShowHide').val("Hide");
else
$('ShowHide').val("Show");
});
but how can I get the name to append to show and hide when the button is toggled?
You can use the text method to get the value of your <td>:
$('#your-td-id').text();
Here's an example of it working.