Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

How do I create an accordion from json data that is from an html form?

I would like to use the html form below:

Code:
<form action="submit-curriculum-data.php" method="POST">
<label for="category">Category:</label>
  <select style="width:21%" id="mySelect11">
  <option value="option1" disabled selected></option>
  <option value="absorptiontechniques"><code>--Show All--</code></option>
  <option value="absorptiontechniques">Absorption Techniques</option>
  <option value="balancebeam">Balance Beam</option>
  <option value="breaking">Breaking</option>
  <option value="blocks">Blocks</option>
  <option value="breathingtechniques">Breathing Techniques</option>
  <option value="breakreleases">Break Releases</option>
  <option value="calisthenics">Calisthenics</option>
  <option value="chokes">Chokes</option>
  <option value="cargonet">Cargo Net</option>
  <option value="characterdevelopment">Character Development</option>
  <option value="drills">Drills</option>
  <option value="falls">Falls</option>
  <option value="floor">Floor</option>
  <option value="forms">Forms</option>
  <option value="grabs">Grabs</option>
  <option value="grappling">Grappling</option>
  <option value="immobilizationtechniques">Immobilization Techniques</option>
  <option value="jointbreaks">Joint Breaks</option>
  <option value="kicks">Kicks</option>
  <option value="lock">Lock</option>
  <option value="movement">Movement</option>
  <option value="philosophy">Philosophy</option>
  <option value="precisionjumping">Precision Jumping</option>
  <option value="pressurepoints">Pressure Points</option>
  <option value="pegboard">Peg Board</option>
  <option value="rings">Rings</option>
  <option value="rolls">Rolls</option>
  <option value="ropes">Ropes</option>
  <option value="rockwall">Rock Wall</option>
  <option value="supplements">Supplements</option>
  <option value="selfdefense">Self-Defense</option>
  <option value="stepping">Stepping</option>
  <option value="stances">Stances</option>
  <option value="striding">Striding</option>
  <option value="strikes">Strikes</option>
  <option value="sparring">Sparring</option>
  <option value="swordbasics">Sword Basics</option>
  <option value="sworddueling">Sword Dueling</option>
  <option value="swordforms">Sword Forms</option>
  <option value="swordtwirling">Sword Twirling</option>
  <option value="trampoline">Trampoline</option>
  <option value="tumbletrack">Tumble Track</option>
  <option value="throws">Throws</option>
  <option value="trainingprinciples">Training Principles</option>
  <option value="vaults">Vaults</option>
  <option value="vitalareas">Vital Areas</option>
  <option value="wall">Wall</option>
</select>
<br><br>
<label for="technique">Technique:</label>
       <select name="technique" id="mySelect22" required>
<option selected disabled>Select technique</option>
    <option>Front Snap Kick</option>
    <option>Round Kick</option>
    <option>Side Thrust Kick</option>
    <option>Side Kick</option>
    <option>Knee Strike</option>
    <option>Elbow</option>
    <option>Hammerfist</option>
  </select>
  <br><br>
          <label for="description" style="display:none">Description:</label><br>
  <textarea name="description" id="description" rows="15" style="width:15%; display:none" required>
  </textarea>
  <br><br>
  <button type="submit" title="Submit">Add</button>
</form>

And I would like to send the data to a json file and then create a new accordion for every new submission and have each accordion layed out as the following:

Accordion Header (the thing that opens the accordion) - This has the category field.
Accordion Panel Header - This has the technique name
Accordion Panel Content - This has the description

I would like to have the accordion button (the thing you see on page load; in other words when it isn't open)) look like the attached image.
And the techniques will also be accordions so that the content opens when the technique is clicked on.
 

Attachments

  • Become a Creator Today!.png
    Become a Creator Today!.png
    49.4 KB · Views: 3

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom