Home>
<section>                   Contact us           <p>If i have any questions, please contact us.</p>        <dl>            <dt>Inquiries by phone</dt>            <dd>Business hours 10: 00-17: 00 (holidays: Saturdays, Sundays, and holidays)</dd>        </dl>        <form action = "" method = "post">        <table>            <tr>                <th>                     <label for = "i_company">                      Company name<em>Required</em>                </label>                </th>                <td>                    <input type = "text" name = "company" required>                </td>            </tr>            <tr>                <th>                    <label for = "i_name">                      Your name<em>required</em>                    </label>                </th>                <td>                    <input type = "text" name = "name" required>                </td>            </tr>            <tr>                    <th>                        <label>                              Inquiry item<em>Required</em>                        </label>                    </th>                                <td>                <input type = "radio" name = "qtype" value = "contact" required>                <label for = "i_qtype01">Inquiries</label>                <input type = "radio" name = "qtype" value = "material request" required>                <label for = "i_qtype02">Request for materials</label><Input type = "radio" name = "qtype" value = "Other" required>                <label for = "i_qtype01">Other</label>                    </td>                </tr>                                        <!-I want to display when selecting an inquiry->                                                <tr>                            <th>                                <label>                                      Site trigger<em>optional</em>                                </label>                            </th>                            <td>                                <input type = "checkbox">                                <label for = "check01_01">Introduction</label>                                <input type = "checkbox">                                <label for = "check01_02">Advertising</label>                                <input type = "checkbox">                                <label for = "check01_03">SNS</label>                            </td>                        </tr>                            <tr>                                <th><label for = "contact_001">                                      Inquiry content<em>Required</em>                                    </label>                                </th>                                <td><textarea rows = "12" required></textarea></td>                            </tr>                                                <!-<I want to display when requesting materials->                                                            <tr>                                    <th><label for = "contact_002">                                          Inquiry content<em>optional</em></label>                                    </th>                                    <td><textarea rows = "12"></textarea></td>                                </tr>                                    <!-I want to display when other selections are made->                                            <tr>                            <th>                                <label for = "url01">Site URL<em>Required</em>                                </label>                            </th>                            <td>                                <input type = "text" name = "url_name" required>                            </td>                        </tr>                        <tr>                            <th>                                <label for = "url02">Article<em>Required</em>                            </label>                            </th>                            <td>                                <input type = "text" name = "url_name" "required>                            </td>                        </tr>
                          <tr>                            <th>                                <label>                                      Challenge<em>Required</em>                                </label>                            </th>                            <td>                                <input type = "checkbox">                                <label for = "check02_01" required>New consideration</label>                                <input type = "checkbox">                                <label for = "check02_02" required>Quality issues</label>                            </td>                        </tr>                        <tr>                            <th>                                <label>                                      Site trigger<em>optional</em>                                </label>                            </th>                            <td>                                <input type = "checkbox">                                <label for = "check03_02">Advertising</label>                                <input type = "checkbox">                                <label for = "check03_03">SNS</label>                                <input type = "checkbox">
                              </td>                    </tr>                    <tr>                        <th><label for = "contact_003">                              Inquiry content<em>Required</em>                            </label>                        </th>                        <td><textarea rows = "12" required></textarea></td>                    </tr>                                                        </form>        </section>

CSS

#contact {
    background: # e7fbde;
}
#contact .inner {
    padding: 80px 0;
}
# contact h2 {
    font-size: 30px;font-weight: 800;
    line-height: 1;
    color: # 5abd29;
    text-align: center;
}
#contact p.lead {
    margin: 30px 0 50px;
    font-size: 20px;
    text-align: center;
}
#contact dl {
    box-sizing: border-box;
    width: 620px;
    margin: 0 auto 90px;
    padding: 30px;
    background: #fff;
    text-align: center;
    border-radius: 10px;
    font-weight: 700;
    line-height: 1;
}
#contact dl dt {
    margin-bottom: 15px;
    font-size: 24px;
    color: # 5abd29;
}
#contact dl dd {
    font-family: Helvetica, Verdana, Arial, YakuHanJP, "Hiragino Kaku Gothic Pro", "Yu Gothic", "Yu Gothic", "Meiryo", Meiryo, Osaka, "MS P Gothic", sans-serif;
    font-size: 50px;
    color: # f39b34;
}
#contact dl dd img {
    width: 34px;
    padding-right: 10px;
    vertical-align: baseline;
}
#contact dl dd: nth-of-type (2) {
    margin-top: 5px;
    font-size: 16px;
    color: # 000;
}
#contact table {
    width: 780px;
    margin: 0 auto;
}
#contact table th {
    position: relative;
    box-sizing: border-box;
    width: 238px;
    padding-right: 20px;
    padding-bottom: 38px;
    font-size: 18px;
    font-weight: 700;
    color: # 5abd29;
    text-align: left;
    vertical-align: middle;
}
#contact table tr: last-child th {
    padding-top: 12px;
    vertical-align: top;
}
#contact table th em {
    position: relative;
    top: 5px;
    float: right;
    padding: 3px 8px;
    font-size: 12px;
    line-height: 1;
    color: #fff;
    background: # e60012;
    border-radius: 2px;
}
#contact table td {
    padding-bottom: 38px;
}
#contact table input,
#contact table textarea {box-sizing: border-box;
    width: 100%;
    padding: 12px;
    font-size: 18px;
    color: # 666;
    border: none;
    border-radius: 4px;
}
#contact table textarea {
    height: 300px;
}
#contact p.btn {
    margin-top: 40px;
    text-align: center;
}
#contact p.btn input [type = "submit"] {
    display: inline-block;
    width: 620px;
    padding: 26px 0;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    background: url ('../ img/ico_arw.png') 100% 50% no-repeat;
    background-size: 45px auto;
    background-color: # f39b34;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}
#contact p.btn input [type = "submit"]: hover {
    background-color: # e88126;
}
# contact.data-contents.siryou {
  display: none;
}
 # contact.data-contents .siryou-02 {
  display: none;
}
# contact.data-contents .siryou-03 {
  display: none;
}

input [value = "contact"]: checked ~ # contact.data-contents.siryou th td {
  display: block;
}
input [value = "Request for materials"]: checked ~ .data-contents .siryou-02 {
  display: block;
}
input [value = "other"]: checked ~ .data-contents .siryou-03 {
  display: block;
}

I am creating an inquiry form using html/css.
According to the radio button selection of "Inquiry item"
I would like to specify the items that I want to display and the items that I want to hide.
If i make it well on the LP page, it will not work even if you specify it with CSS.

I understand that the part I want to hide is a child of the parent element
For example, in the case of HTML in this case, I would say ".data-contents.siryou"
I thought the parent element was "

"
Since it doesn't work at all, I wondered if the recognition was wrong and asked a question.

If i create only the following parts
It is displayed when hidden/selected.



Contact us

If i have any questions, please contact us.



Inquiries by phone

Business hours 10: 00-17: 00 (holidays: Saturdays, Sundays, and holidays)

I can't do it well if.

Please teach.

  • Answer # 1

    There are many parts where HTML is grammatically incorrect. Let's fix this first.

    Double-byte spaces are mixed in.
    There is no closing tag for form and table.
    The correspondence between the start tag and the close tag of the div tag is also strange.
    div cannot be included in the child element of table tag.
    ・ ・ ・
    Such.

    Next, let's stop using table for layout.
    It is semantically NG to make something that is not table data into a table.

    It's a good idea to enclose it in a div or list it, and then use Flexbox to decide the layout.

    The HTML structure is limited to show/hide elements only with CSS without using js.

    The input element and the elements shown/hidden by it must be siblings and parent-child relationships.
    You need to build the HTML to do that.

    Considering the above, it is better to recreate it from scratch.
    With the current HTML, there are too many corrections to use.