JSFiddle - React, Tailwind, and code Playground
HTML
<link href = 'http://localhost/fancySCHMANCY.css' type = 'text/css' rel = 'stylesheet'/>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<select class="tabs">
<option class="tab-link current" data-tab="tab-1">Select One</option>
<option class="tab-link" data-tab="tab-2">Multiple Choice</option>
<option class="tab-link" data-tab="tab-3">True or False</option>
<option class="tab-link" data-tab="tab-4">Short Answer</option>
<option class="tab-link" data-tab="tab-5">Program</option>
</select>
<div id="tab-1" class="tab-content current">
<p>Choose a question type.</p>
</div>
<div id="tab-2" class="tab-content">
<label for="tfq" title="Enter a multiple choice question">
Enter a Multiple Choice Question
</label> <br />
<textarea name="tfq" rows="3" cols="50"></textarea>
<p>Mark the correct answer</p>
<input type="radio" name="multians" value="A">A)</input>
<input name="Avalue" type="text">
<br>
<input type="radio" name="multians" value="B">B)</input>
<input name="Bvalue" type="text">
<br>
<input type="radio" name="multians" value="C">C)</input>
<input name="Cvalue" type="text">
<br>
<input type="radio" name="multians" value="D">D)</input>
<input name="Dvalue" type="text">
<br>
</div>
<div id="tab-3" class="tab-content">
<label for="tfq" title="Enter a true or false question">Enter a True/False Question
</label><br/>
<textarea name="tfq" rows="3" cols="50"></textarea> <br />
<p>Mark the correct answer</p>
<input type="radio" name="tfans" value="true" />True
<input type="radio" name="tfans" value="false" />False
<br />
</div>
<div id="tab-4" class="tab-content">
<label for="tfq" title="Enter a true or false question">Enter a Short Answer Question
</label><br />
<textarea name="saq" rows="3" cols="50"></textarea>
<p>Enter the correct answer</p>
<input...
JavaScript
// this jquery will load on my main page not html file above.
//I have the "class .tabs" loading which displays the dropdown to choose from type of question on line8 of javascript section
//I would like to create a function which will load the "appropriate" div tags when one of the select option is selected. For example, if I select multiple choice option, then I would like to load on my main page the div tag with id= "tab-2" which will display from html file above lines 15 - 35 all corresponding to the multiple choice option if selected.
//I would like to implement the same logic for the other options such as "true/false","short answer, and program"
//also if possible I would like to "generate" the dropdown options each time after user has selected the type of question. This would go on until user has decided to use a submit button which will store the questions selected.
$(document).ready(function() {
$("#second li ").click(function() {
$("#content").load("file_above.html .tabs");
});
});