javascript - 单击折叠按钮时出现问题

Question

我有一个问题。 View 是这样的:

当我点击按钮查看更多时， View 是这样的:

问题是，我希望 View 是这样的:

• 州旁边的城市，
• 邮政编码旁边的国家

如何解决这个问题？我该怎么办？

<div class="row col-md-12 col-12 mb-20 collapse" id="registerform">
    <div class="col-md-6 mb-20">
        <label>City</label>
        <input class="mb-0" type="text" name="city" placeholder="City" value="<?= set_value('city'); ?>">
        <?= form_error('city', '<small class="text-danger pl-2">', '</small>'); ?>
    </div>
    <div class="col-md-6 mb-20">
        <label>State</label>
        <input class="mb-0" type="text" name="province" placeholder="State" value="<?= set_value('province'); ?>">
        <?= form_error('province', '<small class="text-danger pl-2">', '</small>'); ?>
    </div>
    <div class="col-md-6 mb-20">
        <label>Country</label>
        <input class="mb-0" type="text" name="country" value="Indonesia" readonly>
    </div>
    <div class="col-md-6 mb-20">
        <label>Zip Code</label>
        <input class="mb-0" type="text" name="zipcode" placeholder="Zipcode" value="<?= set_value('zipcode'); ?>">
        <?= form_error('zipcode', '<small class="text-danger pl-2">', '</small>'); ?>
    </div>
    <div class="col-md-6 mb-20">
        <label>Phone Number</label>
        <input class="mb-0" type="text" name="phonenumber" placeholder="Phone Number" value="<?= set_value('phonenumber'); ?>">
        <?= form_error('phonenumber', '<small class="text-danger pl-2">', '</small>'); ?>
    </div>

    <input class="mb-0" type="text" name="date_created" value="<?= date('Y-m-d H:i:s');?>" hidden>

    <div class="col-12">
        <button type="submit" name="register" class="register-button mt-0">Register</button>
    </div>
</div>

<a class="cokcok" data-toggle='collapse' href='#registerform' style="margin-left: 15px;">See more...</a>

Answer 1

<div class="row col-md-12 col-12 mb-20 collapse" id="registerform">
    <div class="row">
      <div class="col-md-6 mb-20">
          <label>City</label>
          <input class="mb-0" type="text" name="city" placeholder="City" value="">
      </div>
      <div class="col-md-6 mb-20">
        <label>State</label>
        <input class="mb-0" type="text" name="province" placeholder="State" value="">
    </div>
</div>
<div class="row">
    <div class="col-md-6 mb-20">
        <label>Country</label>
        <input class="mb-0" type="text" name="country" value="Indonesia" readonly>
    </div>
    <div class="col-md-6 mb-20">
        <label>Zip Code</label>
        <input class="mb-0" type="text" name="zipcode" placeholder="Zipcode" value="">
    </div>
</div>
<div class="row">
    <div class="col-md-6 mb-20">
        <label>Phone Number</label>
        <input class="mb-0" type="text" name="phonenumber" placeholder="Phone Number" value="">
    </div>
</div>
<input class="mb-0" type="text" name="date_created" value="" hidden>
<div class="col-12">
    <button type="submit" name="register" class="register-button mt-0">Register</button>
</div>

查看更多...