Help with jQuery show hide div script

Help with jQuery show hide div script

Hi guys,

I have a jquery script for showing and hiding the content inside, between two divs, controlled with radiobuttons. I like to use the same jquery script for another group of divs and radiobuttons so I'm trying to create a loop are so inside jQuery.
Could somebody please help. Thx in advance.

<!----------------- my script ---------------------->

showhide.js

jQuery(function() {

$(document).ready(function(){
$("#div1").css("display","none"); // ol id
$('#div1 :input').attr('disabled', true);
$("#div2").css("display","none"); // ol id
$('#div2 :input').attr('disabled', true);



$(".controledivs").click(function(){
if ($('input[name=radiobtngroup1]:checked').val() == "1" ) {
$("#div1").slideDown("fast"); //Slide Down Effect
$('#div1 :input').removeAttr('disabled');
} else {
$("#div1").slideUp("fast"); //Slide Up Effect
$('#div1 :input').attr('disabled', true);
}

if ($('input[name=radiobtngroup1]:checked').val() == "2" ) {
$("#div2").slideDown("fast"); //Slide Down Effect
$('#div2 :input').removeAttr('disabled');
} else {
$("#div2").slideUp("fast"); //Slide Up Effect
$('#div2 :input').attr('disabled', true);
}

});
});

});

<!------------------- html --------------------------------->


<input name="radiobtngroup1" class="controledivs" type="radio" value="1" />
<input name="radiobtngroup1" class="controledivs" type="radio" value="2" />

<div id="div1">

content

</div>

<div id="div2">

content

</div>




<!------- What can I do to use the same above jQuery for the html below ----------------->


<input name="radiobtngroup2" class="controledivs" type="radio" value="3" />
<input name="radiobtngroup2" class="controledivs" type="radio" value="4" />

<div id="div3">

content

</div>

<div id="div4">

content

</div>
View Answers









Related Tutorials/Questions & Answers:
Help with jQuery show hide div script - JSP-Interview Questions
Help with jQuery show hide div script  Hi guys, I have a jquery script for showing and hiding the content inside, between two divs, controlled with radiobuttons. I like to use the same jquery script for another group of divs
Jquery Hide and Show Div
() methods: Example: Show/Hide Div in jQuery <!DOCTYPE html> <html> <.... The jQuery show hide Div methods works just like the CSS display and block.ADS...Using jQuery effects one can perform lots of task such as Hide, Show, Toggle
Advertisements
jQuery To Hide the Div
jQuery To Hide the Div       In this JQuery tutorial we will develop a program that Hide of a DivADS_TO_REPLACE_1 Steps to develop the Hide of a Div . Step 1:  ADS_TO_REPLACE_2  
JavaScript Hide Div
;h2>Hide Div in JavaScript</h2> <script language=javascript... JavaScript Hide Div...; In this section, we are going to hide div element on clicking the button using
Hide/Show paragraph by button click
Hide/Show paragraph by button click In this tutorial, we will discuss about how to hide/show paragraph by clicking on button using jQuery. In the below... to show Paragraph</button> <p>This will Hide after clicking button<
hide show keyboard iphone
hide show keyboard iphone  How to hide show keyboard in iPhone programmatically
hide show keyboard iphone
hide show keyboard iphone  How to hide show keyboard in iPhone programmatically
hide show keyboard iphone
hide show keyboard iphone  How to hide show keyboard in iPhone programmatically
Show Hide Text Javascript - Java Beginners
Show Hide Text Javascript  Please tell me how to show hide text using Java Script
JavaScript Show Hide table
JavaScript Show Hide table...; In this section, we are going to show and hide table on clicking the button using...;html> <h2>Show or Hide table in JavaScript</h2> <
hide and show result in jsp
hide and show result in jsp  what codes do i have to change to make... or after my while statement in search.jsp file. please help. thank you so much..., MEMBER M WHERE M.MEMBER_ID= B.MEMBER_ID"); } %> <script language="javascript
remove and add div jquery
remove and add div jquery  I want to enable my users to remove or add DIV using JQuery.   $('.add_more').click(function(){ var description = $('#description').val(); $newEl = $('<div class="description_text
Show text by button click using jQuery
Show text by button click using jQuery In this tutorial, we will discuss about hide/show text by clicking on button. In the below example, there are two buttons : hide and show .The "hide " button is used to hide text
Hide boxes by clicking on it using jQuery
Hide boxes by clicking on it using jQuery In this tutorial , we will discuss about how to hide boxes by clicking on it using jQuery. In the given below.... These hide action is due to event click. jqHideboxonclick.html  
Show Limited Data Using jquery
Show Limited Data Using jquery  How to show limited results in JQuery... it using JQuery?   See the JQuery example to show the limited fetch results in JQuery. var comments = $('.description_text').size(); if (comments >
Show mu;tiple DIV contents in a page
Show mu;tiple DIV contents in a page  Hi All; I want to show... drop down list THE DIV content that was previously displayed will hide... CAN.... on selecting an option, it should display 1 div out of 3 div contents. 1st div tag
Hide show HTML forms using javascript
Hide show HTML forms using javascript  How to hide a HTML form in my application using JavaScript?   HTML Code to create checkbox <...;div id="yourDiv"> ...other forms... </div> JavaScript function to hide
Hide hyperlink using jQuery
Hide hyperlink using jQuery In this tutorial, we will discuss about how to hide hyperlink after clicking it using jQuery. In the below example , a hyperlink "Click here to hide this link" is included in the web page. When we
Hide/show Image by click
Hide/show Image by click In this tutorial ,we will discuss about how to display image by click using jQuery. In the below example, a image and two lines...; Click here to hide the logo </font> </div> <div id
jQuery Toggle the Div
jQuery Toggle the Div       In this JQuery tutorial we will develop a program that toggle the content... the jQuery JavaScript library file:ADS_TO_REPLACE_4 <script type="text
qunit jquery with java script
qunit jquery with java script  hi deepak How to write a javascript code and do the test by using qunit sample application and as I am new to testing how to setup the environment for java script testing? where should I run
How to animate div with jQuery and JavaScript?
Adding maximize effect to a div: How to animate div with jQuery...;html> <head> <title>How to animate div with jQuery and JavaScript... we have to include jQuery library using following code: <script src="https
How to animate div with jQuery and JavaScript?
to animate div with jQuery and JavaScript?</title> <script src="https...Adding maximize effect to a div: How to animate div with jQuery...: Check jQuery Maximize div example code online.ADS_TO_REPLACE_5
jQuery to Show Data Randomly
jQuery to Show Data Randomly      ...;title>AJAX with jQuery Example</title> <script type="text...: The following code includes the jQuery JavaScript library file: <script type="
show, hide, disable components on a page with struts - Struts
show, hide, disable components on a page with struts  disabling a textbox in struts.. in HTML its like disable="true/false" how can we do it in struts
Animate Div in Jquery
There are several jQuery methods that can be used for different purpose like jQuery .finish(), .queue(), .show(), .slideDown(), .slideUp(), .stop... in jQuery. Animate Div in jQuery - jQuery .animate() ExampleADS_TO_REPLACE_1
Toggle hide/show by clicking same button
Toggle hide/show by clicking same button In this tutorial, we will discuss about how to toggle hide/show by clicking button. In the given below 2 example, there is button ,by clicking on it, the paragraph will hide/show . In first
Browser Back Button Disable/Hide/Invisible using Java Script
Browser Back Button Disable/Hide/Invisible using Java Script  Dear Sir, Please Help..., Q: How to Write Code For Browser Back Button Disable/Hide/Invisible using Java Script without Page Reload/Refreshing. anyone
JSP hide and show tables
JSP hide and show tables In this tutorial, you will learn how to hide and show html tables using javascript in jsp. Here is an example of simple jsp code which is having a table consists of database data and a Go button. Using
how can i hide and show tables
how can i hide and show tables  hai, i am creating a form which the code is included below i want to hide the tables initially and after i click go i want to display the tables with result.so any help is appreciated much <
Java Script Help
help --- <html> <head> </head> <script language...Java Script Help  I have written a countdown timer using javascript....' window.location = 'crdtd.php?q=b
Dojo Show and Hide Dialog
Dojo Show and Hide Dialog         In this example, you will learn dojo show and hide... box. Try Online: Show and Hide DialogADS_TO_REPLACE_1 Here
Need Help on the script
Need Help on the script  hello there, My name is Femi and am a web developer using php. am working on a project. and am having some difficulties. i dont know if you can help me out with it. The platform am building will receive
jquery issue plese help
jquery issue plese help  Im am trying to Change the background color... }); // end ready JavaScript & jQuery TheMissingManual... JavaScript & jQuery: The Missing Manual, by David McFarland. Published
jQuery - jQuery Tutorials and examples
the "result".    jQuery To Hide the Div In this JQuery tutorial we will develop a program that Hide of a Div   ... will show you how to use jQuery to develop nice ajax based applications.ADS
jQuery tutorial for beginners
jQuery tutorial for beginners Learn jQuery with the help of our tutorial....js"></script> Step 3: Adding jQuery code to show alert message... jQuery in detail with the help of our free jQuery tutorials at http
jQuery Demos
jQuery Hide/Show paragraph by button click Hide/show Image by click Show text field & check... Hide hyperlink using jQuery Hide text
Show text field & check input using jQuery
Show text field & check input using jQuery In this tutorial, we... input using jQuery. In the below example, aIn this tutorial, we will discuss about... jQuery. In the below example, a button is given when we click on it, 
How to hide and show some field on a radio button click
How to hide and show some field on a radio button click  This is my code part:- PAYMENT DETAILS <table cellpadding="0" cellspacing="0" align...; document.getElementById(bankname).style.display=none; } } please help me
JQuery
JQuery  hi there, I am just beginner for jQuery and i want to know-what is jQuery ? How it is better than JavaScript ?   jQuery... JavaScript : Each jQuery returns itself so you can chain them together(Chaining
Hide text by clicking button
Hide text by clicking button In this tutorial, we will discuss about hide/show... : hide and show .The "hide " button is used to hide text and "show button " is used to show text. These actions are fired when "
jQuery with other libraries
;html> <head><title>jQuery Example</title> <script type="...;).hide(); </script> </head> <body><div id="... jQuery jquery with other Libraries  
jQuery Tutorials, jQuery Tutorial
jQuery Tutorials, jQuery Tutorial The jQuery tutorials listed here will help you in learning jQuery easily. We have given many articles and easy... to create neat and clean project with the help of jQuery Write unit
jquery
jquery  What are the Jquery similarities or difference with other java script libraries
JavaScript hide image
;h2>Show and Hide Image in JavaScript</h2> <script language...; In this section, we are going to show and hide image on clicking the button using... JavaScript hide image
jQuery autocomplete
with the help of jquery plugin and php/mysql .ADS_TO_REPLACE_1 In this example when we...;jQuery Auto Complete</title>ADS_TO_REPLACE_4 <script type="text...jQuery Autocomplete : Autocomplete is a common feature available in lot of web
JavaScript hide() method
;title> Hide method </title> <script language="JavaScript">... JavaScript hide() method       JavaScript provides a method hide(), so that user can hide elements
autocomplete(): Spring mvc with jquery: I am not getting correct value in the text filed. Please help me
autocomplete(): Spring mvc with jquery: I am not getting correct value in the text filed. Please help me   Hi have develop the jsp to populate...;jQuery UI Autocomplete - Multiple, remote</title> <link rel="stylesheet
Understanding the jQuery event handling mechanism
;Click to show Paragraph</button> <p>This will Hide after...").hide(); ADS_TO_REPLACE_5 After it the following script is set... The inside code lines are used to hide paragraph ,hide button1 , show hidden
Moving Div by button click using animate effect
Moving Div by button click using animate effect In this tutorial , we will discuss how to move 'div' left-right by button click using jQuery. In this example , 'div' is moving left / right by left / right button click

Ads