Question

My question is how can I create expandable panels in an HTML form without using javascript, so that when a user clicks on each panel it expands and displays the form.

Before click:

<ul>
    <li id="panel1"><a></a><div class="content"></div></li>
    <li id="panel2"><a></a><div class="content"></div></li>
    <li id="panel3"><a></a><div class="content"></div></li>
</ul>

After click:

<ul>
    <li id="panel1">
      <a></a>
        <div class="content">
            <form id="FORM"> ..... </form>
        </div>
    </li>
    <li id="panel2"><a></a><div class="content"></div></li>
    <li id="panel3"><a></a><div class="content"></div></li>
</ul>

Answer 1

You can do that using :target css pseudo selector – it is not very elegant though, as clicking on the anchor tag modifies the url so it is hard to toggle the form. Best use javascript.

        <style>
        form {
            display: none;
        }
        form:target {
                display: block;
                background: red;
            }
        </style>
        <ul>
<li id="panel1" ><div class="content"><a href="#form">Show form</a><form id="form" > My form <input type="text"></form></div></li>
<li id="panel2"><div class="content">My content</div></li>
<li id="panel3"><div class="content">My content</div></li>
</ul>

some examples of :target in action:
http://css-tricks.com/css-target-for-off-screen-designs/ and http://css-tricks.com/on-target/