Toggle Button

by Cosette Girardot

HTML

<table border="0" >
<tbody>
<tr class="expandable">
<td colspan="2">
	<a class="whitelnk" ><strong><li>Who is Eligible for Advantage?</li></strong></a>
</td>
</tr>
<tr>
<td>Everyone!</td>
</tr>
</tbody>
</table>
<table border="0">
<tbody>
<tr class="expandable">
<td colspan="2">
	<a class="whitelnk"><strong><li>Once I choose an advantage plan, am I able to change it?</li></strong></a>
</td>
</tr>
<tr>
<td>You can't!</td>
</tr>
</tbody>
</table>	
<table border="0">
<tbody>
<tr class="expandable">
<td colspan="2">
	<a class="whitelnk"><strong><li>What is a Meal Transfer</li></strong></a>
</td>
</tr>
<tr>
<td>Who Knows!</td>
</tr>
</tbody>
</table>
<table border="0" >
<tbody>
<tr class="expandable">
<td colspan="2">
	<a class="whitelnk"><strong><li>Does the balance of my Advantage plan rollover after the semester?</li></strong></a>
</td>
</tr>
<tr>
<td>no clue!</td>
</tr>
</tbody>
</table>
<table border="0">
<tbody>
<tr class="expandable">
<td colspan="2">
	<a class="whitelnk"><strong><li>How long do Advantage plans last?</li></strong></a>
</td>
</tr>
<tr>
<td>not very!</td>
</tr>
</tbody>
</table>
<table border="0">
<tbody>
<tr class="expandable">
<td colspan="2">
	<a class="whitelnk"><strong><li>How do I pay for an Advantage plan?</li></strong></a>
</td>
</tr>
<tr>
<td>BUNNNNNNIES!</td>
</tr>
</tbody>
</table>
<table border="0">
<tbody>
<tr class="expandable">
<td colspan="2">
	<a class="whitelnk"><strong><li>Are there any taxes applied to purchases using an Advantage plan?</li></strong></a>
</td>
</tr>
<tr>
<td>oooooh probably. you should look into that</td>
</tr>
</tbody>
</table>
<table border="0">
<tbody>
<tr class="expandable">
<td colspan="2">				
	<a class="whitelnk"><strong><li>What if I lose my ID?</li></strong></a>
</td>
</tr>
<tr>
<td>You die!</td>
</tr>
</tbody>
</table>

CSS

<div style="width: 250px; float: left; text-align: center;">

<img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.emich.edu/residencelife/images/staff/2016/nick_dibenedetto.jpg" alt="Nick Dibenedetto" width="200" height="200" /> 

<strong> Nick Dibenedetto </strong>

<br />Graduate Assistant for 

<br />Operations 
<br /> 

<strong> <a href="mailto:[email protected]">[email protected]<br /></a> </strong>
</div>

JavaScript

$(document).ready(function () {
			$('.expandable').click(function () {
			$('.expandable').not(this).nextAll('tr').hide();
			$('.expandable').not(this).find('input[type="button"]').val("+");
			$(this).nextAll('tr').toggle(350);
				if( $(this).find('input[type="button"]').val() == "+")
			{
				$(this).find('input[type="button"]').val("-");
				}
			else
			{
			$(this).find('input[type="button"]').val("+");
			}
			
			});
			$('.expandable').nextAll('tr').each(function () {
			if (!($(this).is('.expandable'))) 
			{$(this).hide();	
			}
			});
		$('.expandable').on('click','.expandable',function () {
		$(this).siblings('.whitelnk').removeClass('title2act');
		$(this).addClass('title2act');
	});
	});