Multiple Autoload Questions

by 76484

HTML

<div id="email" class="form-item">
    	<h2>Q with 1 more option?</h2>

    <input type="button" value="true" data-value="#web" />
    <input type="button" value="no" />
</div>
<div id="web" class="form-item">
    	<h2>Q with 2 more option?</h2>

    <input type="button" value="yes" data-value="#analy,#seo" />
    <input type="button" value="no" />
</div>
<div id="analy" class="form-item">
    	<h2>Q3?</h2>

    <input type="button" value="yes" data-value="#social" />
    <input type="button" value="no" />
</div>
<div id="seo" class="form-item">
    	<h2>Q4?</h2>

    <input type="button" value="yes" data-value="#social" />
    <input type="button" value="no" />
</div>

CSS

.form-item {
      display: none;
  }

JavaScript

//$('.form-item:nth-child(1)').slideDown('fast');

	/*$('input[value="yes"],input[value="true"]').click(function () {
	    next_id = $(this).attr('data-value');
	    matches = [next_id];
	    rx = /[^a-z|^0-9]/g;
	    if (patt = next_id.match(rx)) {
	        matches = next_id.split(patt[0]);
	        //			console.log('multiple data found with selector: '+patt[0]);
	    }

	    i = 0;
	    while (matches[i]) {
	        $('#' + matches[i]).slideDown('fast');
	        i++;
	    }
	    //		$('#'+next_id).slideDown('fast');
	});*/

$('.form-item').first().slideDown('fast');
$('input[data-value]').click(function () {
   var target_selectors = $(this).attr('data-value');
   $(target_selectors).slideDown('fast');
});