はかつてあなたがもう一度ボタンをクリックした場合、それはdisapearますし、ボタンをクリックしましたか？

Question

私は割り当ての離れのための大学のためのウェブサイトをしています。とにかくボタンを作成し、CSSでスタイルを設定しました。ユーザーがボタンをクリックするとテキストが表示され、ユーザーがボタンを再度クリックすると消えます。私はJQueryでコーディングしようとしましたが（そのほうがはるかに簡単ですが）、たとえそれが正しいと思うとしても、私がブラウザーにしたいと思うようには表示されません。あなたのボタンと、pを選択する際にあなただけの#を逃している

Jquery 
 
$(document).ready(function() { 
 
    $("Belfastbutton").click(function() { 
 
    $("Belfastcontactdetails").toggle(); 
 
    }); 
 
});

#Belfastbutton { 
 
    position: absolute; 
 
    color: green; 
 
    top: 310px; 
 
    left: 130px; 
 
    height: 40px; 
 
    width: 120px; 
 
    background-color: #e0e0d1; 
 
    border-radius: 5px; 
 
    padding: 5px; 
 
} 
 

 
#Belfastcontactdetails { 
 
    color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1 id="Belfast">Belfast</h1> 
 
<button id="Belfastbutton">Click for Details</button> 
 
<p id="Belfastcontactdetails"> 
 
    34 Boucher Road, Belfast. 
 
    <br> Co.Antrim 
 
    <br> BT27 
 
</p>

Answer 1

助けてください。情報については

$(document).ready(function() { 
 
    $("#Belfastbutton").click(function() { 
 
    $("#Belfastcontactdetails").toggle(); 
 
    }); 
 
});

#Belfastbutton { 
 
    position: absolute; 
 
    color: green; 
 
    top: 310px; 
 
    left: 130px; 
 
    height: 40px; 
 
    width: 120px; 
 
    background-color: #e0e0d1; 
 
    border-radius: 5px; 
 
    padding: 5px; 
 
} 
 

 
#Belfastcontactdetails { 
 
color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1 id="Belfast">Belfast</h1> 
 
<button id="Belfastbutton">Click for Details</button> 
 
<p id="Belfastcontactdetails"> 
 
    34 Boucher Road, Belfast. 
 
    <br> Co.Antrim 
 
    <br> BT27 
 
</p>

Answer 2

：

また、CSSにリレーすることができます：

[for="Belfastbutton"] { 
 
    position: absolute; 
 
    color: green; 
 
    top: 310px; 
 
    left: 130px; 
 
    line-height: 40px; 
 
    width: 120px; 
 
    background-color: #e0e0d1; 
 
    border-radius: 5px; 
 
    padding: 0 5px; 
 
    text-align:center; 
 
    box-shadow:2px 2px 2px 1px gray; 
 
    transition:0.05s; 
 
} 
 
#Belfastcontactdetails { 
 
color: green; 
 
display:none; 
 
} 
 
#Belfastbutton:checked ~ #Belfastcontactdetails { 
 
display:block; 
 
} 
 
/* hide input */ 
 
#Belfastbutton {position:absolute; 
 
right:100vw; 
 
} 
 
/* add visual behavior to label */ 
 
[for="Belfastbutton"]:active { 
 
    box-shadow:-2px -2px 2px 1px gray; 
 
}

<h1 id="Belfast">Belfast</h1> 
 
<label for="Belfastbutton">Click for Details</label> 
 
<input type="checkbox" id="Belfastbutton"/> 
 
<p id="Belfastcontactdetails"> 
 
34 Boucher Road, Belfast. 
 
<br> Co.Antrim 
 
<br> BT27 
 
</p>