PyNEwbie PyNEwbie - 1 year ago 50
CSS Question

How do I create a collapsible container that displays the message on page load

I want some instructions to be collapsible on a webpage. I want the instructions by default to be collapsed and when clicked the user should be able to then have the instructions be displayed. I have pretty much accomplished this except for the fact that my text prompt Click for Instructions is not displayed when the page initially loads. Instead I have to hover over the instructions to get them to display.

I am not sure but I think it matters that this is on Amazon Mturk -

<!-- Bootstrap v3.0.3 -->
<link href="https://s3.amazonaws.com/mturk-public/bs30/css/bootstrap.min.css" rel="stylesheet" />
<section class="container" id="TranscriptionFromAnImage" style="margin-bottom:15px; padding: 10px 10px; font-family: Verdana, Geneva, sans-serif; color:#333333; font-size:0.9em;">
<div class="row col-xs-12 col-md-12"><!-- Instructions -->
<div class="panel panel-primary">
<div class="panel-heading"><a href="javascript:;" onmousedown="if(document.getElementById('collapse1').style.display == 'none'){ document.getElementById('collapse1').style.display = 'block'; }else{ document.getElementById('collapse1').style.display = 'none'; }"><strong>Click for Instructions</strong></a></div>
</div>
</div>
<div id="collapse1" style="display:none">
<p>here are some instructions</p>
</div>
</section>
<!-- End Instructions -->


To be clear, when the page first loads - I see the following

Page on Load

When I mouse over the page I see the text that I want to have displayed on loading

Text when mouse over

I mention earlier that I am using MTurk - I think this is important because we originally tried to do this using an approach that required we provide a link to

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


But that did not give us any of the collapsible functionality from MTurk (worked great outside of MTurk) I believe but could not confirm that AWS does not allow access to those resources from within Mturk.

Answer Source

You simply need to set the CSS color property of the .panel-heading a tag.

Right now, it's the same as the background-color of the container, so it doesn't appear to be there. When you hover, the link changes color to be slightly darker, hence it appears when hovered. I've also added a .panel-heading a:hover selector rule, so you can see how to change the color on hovering the text.

See the code snippet below:

.panel-heading a {
  color: #fff;  
}
.panel-heading a:hover {
  color: green;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- Bootstrap v3.0.3 -->
<link href="https://s3.amazonaws.com/mturk-public/bs30/css/bootstrap.min.css" rel="stylesheet" />
<section class="container" id="TranscriptionFromAnImage" style="margin-bottom:15px; padding: 10px 10px; font-family: Verdana, Geneva, sans-serif; color:#333333; font-size:0.9em;">
<div class="row col-xs-12 col-md-12"><!-- Instructions -->
<div class="panel panel-primary">
<div class="panel-heading"><a href="javascript:;" onmousedown="if(document.getElementById('collapse1').style.display == 'none'){ document.getElementById('collapse1').style.display = 'block'; }else{ document.getElementById('collapse1').style.display = 'none'; }"><strong>Click for Instructions</strong></a></div>
</div>
</div>
<div id="collapse1" style="display:none">
<p>here are some instructions</p>
</div>
</section>
<!-- End Instructions -->