JQuery шоу() оленья кожа работает как ожидалось

Question

У меня есть следующий Див Заблокировать

 <div class="score-description col-sm-3"> 
      <table class="table table-striped"> 
       <thead> 
        <th> Score 
        </th> 
        <th> Description 
        </th> 
       </thead> 
       <tr> 
        <td>0</td> 
        <td>Poor</td> 
         ... 
         ... 
       </tr> 
      </table> 

     </div> 

Я хотел показать этот блок при следующем нажатии кнопки.

<Button class="btn btn-warning show-score-description-button"> 
    Score Descriptions 
</Button> 

У меня есть следующий сценарий, чтобы показать блок-

$(".show-score-description-button").click(function(){ 
     $(".score-description").show(); 
}) 

CSS для .score-описание класса

.score-description{ 
     position: fixed; 
     z-index: 1; 
     overflow: scroll; 
     margin-top:-100px; 
     height: 50%; 
     margin-left: 7%; 
     margin-top: 5%; 
     background-color: #ffffff; 
     display: none; 

    } 
    .score-description table th{ 
     border: 2px solid #aaaabb; 
    } 
    .score-description table td{ 
     border: 2px solid #aaaabb; 
    } 

Проблема заключается в том, когда я нажимаю на кнопку отображается блок и сразу скрывается. Что мне не хватает?

Answer 1

Сделайте свою кнопку type="button". В настоящее время ваш button отправляет страницу. Таким образом, он показывает страницу в состоянии по умолчанию.

<Button type="button" class="btn btn-warning show-score-description-button"> 
Score Descriptions 

Answer 2

Попробуйте toggle()

$(".show-score-description-button").click(function() { 
    $(".score-description").toggle(); 
})