Как закрыть одно поля если другое открыто?
можно воспользоваться таким вариантом 
snippet
Ба, да это же табы! Вот так их можно реализовать без js:
<label for="tab1">tab1 button</label><br>
<label for="tab2">tab2 button</label><br>
<label for="tab3">tab3 button</label><br>

<div class="tab">
    <input type="radio" name="tabRadio" id="tab1" class="tab__radio">
    <div class="tab__content">tab1 content</div>
</div>
<div class="tab">
    <input type="radio" name="tabRadio" id="tab2" class="tab__radio">
    <div class="tab__content">tab2 content</div>
</div>
<div class="tab">
    <input type="radio" name="tabRadio" id="tab3" class="tab__radio">
    <div class="tab__content">tab3 content</div>
</div>

<style>
.tab .tab__radio,
.tab .tab__content {
    display: none;
}
.tab .tab__radio:checked + .tab__content {
    display: block;
}
</style>