Hi I have several buttons the first one is a show/hide and it works correctly when it is first clicked on. The second one is next table and when next table is clicked on it should be hiding table 1 and only displaying table 2. Then if the hide button is clicked it should hide both table1 and table2 and currently table 2 still shows when the hide button is clicked. Here is an example of my problem and code: http://jsfiddle.net/zfnx6/27/
I updated your code to behave like you described, the biggest change was to define the outer table as a container for table1 and table2. That way clicking on the top button (Show/Hide) affects both tables at once rather than having to mess with if statements for both tables.
There were some parameters changed with the buttons in the HTML, and the second button became a toggle for both tables. If you will use more than two tables, the current approach won't be too effective.
Demo http://jsfiddle.net/zfnx6/41/
$(document).ready(function(){
$("#hide").click(function(){ //#hide use your element id
$("p").hide(); // use your element to hide
});
$("#show").click(function(){ //#show use your element id
$("p").show(); // use your element to show
});
});
This is just basic way
Take a look at jquery ui accordian.
If you want only one table showing at a time, you may want to consider using this.
In your fiddle, you are not using jquery. Showing and hiding elements in jquery is very easy, and reduces your code quite a bit.
If you're interested in using jQuery it would clean up your code a lot. Here's an example: http://jsfiddle.net/zfnx6/43/
My own variation: http://jsfiddle.net/zb9Tt/
I made a couple changes to your HTML, but mostly this is about the javascript. The following is some pretty light jQuery that will do what you want for an unlimited group of toggleable objects on the page. The active class is used to show the currently selected "tab".
(function ($) {
$(document).ready(function () {
$("#togglebutton").bind("click", function () {
$(".active, #nextbt").toggle();
});
$("#nextbt").bind("click", function () {
var current = $(".active");
var next = $(".active + .toggleable");
if (next.length) {
current.removeClass("active").hide();
next.addClass("active").show();
}
});
});
})(jQuery);
Related
I have an html table stuffed with data that is sorted by the awesome plugin datatables. Now I wan't each row to be clickable, so I added the following piece of jquery:
$( document).ready( function() {
$('.clickable').click(function () {
$(location).attr('href', $(this).data("href"));
})
}
);
This only works however, for the piece of the table that is initially shown (so the first 10 rows). If I extend the number of entries that are show with the default button: , my new entries are not clickable. How do I load the javascript in such a way, that also new entries are clickable?
please try to use the handler for table row click as written below :
$('body').on('click', '.clickable tbody tr', function () {
As #Michael pointed out always try use separate function for Event Handling as its easy maintain and modify.
The JavaScript that makes rows clickable is run once when the page first loads. It would be better to make it a separate function that gets called immediately after any new rows from the table load.
As #Prakash Thete pointed out, using .on('click') instead of click should add the effect to dynamically added elements, even when called once.
So my scenario goes like this:
I have 3 kind on item to show in div. There are three buttons on top of div and when user click any of the button items corresponding to that items are shown.
Items comes from backend and I am getting all the items loaded on page load as I also need them some where else also within same context.
Currently I am following show hide approach for the same .What I want to know is can there be any other approach that can be better then this in terms of code optimisation. User can also edit /add./remove item?
Here is my fiddle
$(document).ready(function(){
console.log($('.toggleItems'));
$('.toggleItems').click(function(){
$('.containers').hide();
var identifier = $(this).data('identifier');
console.log(identifier);
$('#'+identifier).show();
});
})
First order by items then use accordion jquery
I have a problem with the show/hide function on an app form. The app form is live here -> http://www.specialfinance.co.uk/introducers/submit-an-enquiry/secured-loans.html
Currently the form works as a multipage form (within javascript) which is fine, it's doing the job nicely, but what I can't figure out based on any of the Q&A guides I've looked thru on here (I've gone thru many google searches) is how to integrate a further show/hide script to hide the applicant 2 column if the dropdown at the top has a value of 1.
The column is a table with all the inputs in separate rows, so I was thinking that the easiest way would be to link to a class and then hide the class, but I have no idea how to do this.
I'm getting there with my knowledge of javascript, but this one seems to be a hurdle I can't get over.
You can use the .change() (jQuery) with the dropdown list to see what the value is, then based off that, hide and show what you need.
$("#idOfDropDown").change(function() {
if ($(this).val() == 1) {
//Show or Hide what you need .show()
}
else {
//Show or Hide .hide()
});
Heres a demo: http://jsfiddle.net/Szt59/1/ using a class.
Here is a quick and dirty example. It's easy to see how you can extend it.
$("#drop").change(function(){
if( $(this).val() === "2" ) {
$(".rest").slideDown("fast");
} else {
$(".rest").slideUp("fast");
}
});
Click to see demo
Edited.
I have an unordered list where I hide any additional list items if more than 3. After that I invoke a JQuery function that puts in a "show more" link at the bottom and toggles any additional list items to show.
However, I'm a bit stuck, I'd like to convert the show link to "Hide" once all list items are showing and clicking on that then hides the additional list items and then the link changes back to "Show more..." again.
Here is the code I have so far that works to expand and show the additional list items.
$('ul li:gt('+index+')').hide();
$('ul').append('<li class="more">Show more...</li>');
$('ul li.more a').click(function() {
$('ul li.more a').remove();
$('ul li:gt('+index+')').show();
});
Note I am not stuck on this code, if there is a better way do implement the entire show / hide code, that's fine.
I wrote a fiddle with the code I have so far.
Here jquery toggle() function comes in handy - you can attach to event handlers that will be called every other time element is clicked. Use text() to change text of the link (which should't be a link if you don't plan a fallback - use span instead)
Updated fiddle.
There you go sir :)
Fixed and running well!
http://jsfiddle.net/TQXQD/7/
I need to create a form which has 2(Yes/NO) options and if the user clicks one of the option then he should get a collapsing subform with more specifics regarding to that particular selection. If he selects other option then he should get another collapsing subform with related info. I know that we have to use JavaScript or Jquery(to get the collapsing effect), but I am new to both. Any simple tutorials or info for beginners is greatly appreciated.
PS: I have seen many questions for this requirement but the fact is me being a beginner makes it tough to understand them.
Thanks,
Basically, you are going to need to wrap the two different subforms in divs and then use the jQuery .show() and .hide() functions to show and hide them when the right radio button is clicked.
Here is a useful tutorial on showing and hiding: http://papermashup.com/simple-jquery-showhide-div/
EDIT: More specific answer for user..
$(document).ready(function(){
$("#check-box").click( function(){
if( $(this).is(':checked')) {
$('#div1').show();
} else {
$('#div1').hide();
}
});
});
You have to render the entire form and hide all the subforms, each with a different ID. Depending on the button/choice pressed, you call $.show() on the corresponding div with code like this:
$("#choice1_subform").click(function(){
$("#div1").show();
});