• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 981
  • Last Modified:

Toggle Show/Hide Element that is sibling of Checkbox with JQuery

Hi,

Looking for a JQuery solution to this -
I have a series of HTML checkboxes and each has a hidden element (<ul class="product-status-options-controls">) associated with it. When a checkbox is checked I would like to show the element associated with that checkbox, while the others remain hidden. If another checkbox is selected the current hides and the new one is visible.

Below is the basic HTML. So, on page load, the "product-status-options-controls" class is hidden. When a checkbox under the class "product-status-options" is checked, that checkbox's corresponding "product-status-options-controls" element is visible. It will hide again if another checkbox is selected and the new checkbox's  "product-status-options-controls" element becomes  visible.

<form action="#" method="post">
<fieldset>
<legend>Add Product</legend>
<ul class="product-status-options">
	<li>
	<input type="checkbox" name="status_welcome" id="status_welcome" value="1" /> 
	<label for="status_welcome">Welcome</label>
	<ul class="product-status-options-controls">
		<li>
		<label for="status_welcome_notes">Note:</label><br />
		<textarea name="status_welcome_notes" id="status_welcome_notes" cols="25" rows="4"></textarea>
		</li>
		
		<li>
		<input type="submit" value="Update"/>
		</li>
	</ul>
	</li>
	
	<li>
	<input type="checkbox" name="status_preproduction" id="status_preproduction" value="1" /> 
	<label for="status_preproduction">Pre-Production</label>
	<ul class="product-status-options-controls">
		<li>
		<label for="status_preproduction_notes">Note:</label><br />
		<textarea name="status_preproduction_notes" id="status_preproduction_notes" cols="25" rows="4"></textarea>
		</li>
		
		<li>
		<input type="submit" value="Update"/>
		</li>
	</ul>
	</li>
	
	<li>
	<input type="checkbox" name="status_production" id="status_production" value="1" /> 
	<label for="status_production">Production</label>
	<ul class="product-status-options-controls">
		<li>
		<label for="status_production_notes">Note:</label><br />
		<textarea name="status_production_notes" id="status_production_notes" cols="25" rows="4"></textarea>
		</li>
		
		<li>
		<input type="submit" value="Update"/>
		</li>
	</ul>
	</li>
	
	<li>
	<input type="checkbox" name="status_shipped" id="status_shipped" value="1" /> 
	<label for="status_shipped">Shipped</label>
	<ul class="product-status-options-controls">
		<li>
		<label for="status_shipped_notes">Note:</label><br />
		<textarea name="status_shipped_notes" id="status_shipped_notes" cols="25" rows="4"></textarea>
		</li>
		
		<li>
		<input type="submit" value="Update"/>
		</li>
	</ul>
	</li>
</ul>
</fieldset>
</form>

Open in new window

0
Animaze
Asked:
Animaze
  • 2
1 Solution
 
Julian HansenCommented:
The solution assumes checkboxes are the only ones on the page you want to change.

$(function() {
  $('input[type=checkbox]').click(function() {
     if ($(this).is(':checked')) {
       $(this).next().next().show();
     }
	 else {
       $(this).next().next().hide();
	 }
  });
});

Open in new window

You can also give your ul an id made up of a the checkbox id with a constant suffix or prefix - makes it easier to identify

Attached file is full sample with checkboxes having extra class to identify them and ul id made up of their corresponding checkbox id with a suffix of '-ul'
t60.php
0
 
AnimazeAuthor Commented:
Thanks for the excellent examples. Was easily able to understand and implement it.
0
 
Julian HansenCommented:
Thank you and you are most welcome
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now