PyNEwbie PyNEwbie - 3 months ago 17
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

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