change elements to required on click

by swdmedia

HTML

<form action="">
<div>
  <h3>Select your personalization type</h3>
</div>
	<div id="tabs" class="ui-tabs">
		<ul class="ui-tabs-nav clearfix">
          <li class="persnl"><a href="#tabs-1" class="button">No Personalization</a><input type="radio" name="properties[Personalization]" class="hidden" value="No Personalization" checked /></li>
          <li class="persnl"><a href="#tabs-2" class="button">Single Initial</a><input type="radio" name="properties[Personalization]" class="hidden" value="Single Initial"/></li> 
          <li class="persnl"><a href="#tabs-3" class="button">3 Initials</a><input type="radio" name="properties[Personalization]" class="hidden" value="3 Initials"/></li>
          <li class="persnl"><a href="#tabs-4" class="button">Text</a><input type="radio" name="properties[Personalization]" class="hidden" value="Text"/></li>
		</ul>
<hr/>
		<div id="tabs-1" class="ui-tabs-panel">
  <p>No personalization options.</p>
</div><!--/.tabs-1-->

      	<div id="tabs-2" class="ui-tabs-panel">
          <h4>Single Initial Options</h4>
          <div class="clearfix">
          <label for="sFonts" class="label">Font:</label> 
            <select id="sFonts" name="properties[Single Font]" class="inline">
          	<option value="">--Please Select--</option>
            
              <option value="Blackboard">Blackboard</option>
            
              <option value="Classic">Classic</option>
            
              <option value="Cottilion">Cottilion</option>
            
              <option value="Curly Q">Curly Q</option>
            
              <option value="Dottie">Dottie</option>
            
              <option value="Etiquette">Etiquette</option>
            
              <option value="Party Time">Party Time</option>
            
              <option value="Tipsy">Tipsy</option>
            
              <option value="Whimsy">Whimsy</option>
            
          </select>
            <div><a href="#pop-fonts"...

CSS

hr { clear: both;}
#tabs {overflow: auto;}
.ui-tabs-panel {float: left; width: 20%; margin-right: 1%;}
h3, h4 { font-weight: 100;}

JavaScript

$(".persnl").click(function(){
    
    var myTab = $(this).find("a").attr("href");
    // alert(myTab);

    $(this).find(':radio').prop('checked',true);
    // alert('clicked');  
    
    $(myTab).each(function() {
      $('input[type=text]').prop("required", true);
    });
    return false;

  });