Mitiku Mitiku - 5 months ago 13
jQuery Question

JQuery show() method doesnot working as expected

I have the following div block

<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>


I wanted to show this block when the following button is clicked.

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


I have the following script to show the block

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


css for .score-description class is

.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;
}


Problem is when i click the button the block is shown and immediately hides. What am I missing??

Answer

Make your button type="button". Currently your button is submitting the page. So its shows the page in default state.

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