Bootstrap jQuery button & click to toggle text/entry fields

Question

Links in pastebin here: http://pb.gizmokid2005.com/o8s (numbers in each ref refer to lines in the paste).

I found a very similar answer to what I'm trying to do on stackoverflow[1].

In short I want to have a button that I can use, in which the text will also toggle, that will toggle some text/fields to display/hide when it's clicked.

My whole app is here[2] with the specific code I added for the button in the pages index here[3]. The CSS that I'm using can be found in the custom.css.scss[4].

My dev site with heroku is http://s.g2k5.us. If you load the site, you'll notice that the button shows up correctly with the "Show details" text, but if you click it, the text goes away, even though the toggle otherwise works correctly.

Another issue I'm having with it, if I move the button code to be before the fields I'm trying to toggle, ie - move line 41 in /pages/index.html.erb to before line 29, the button text doesn't work at all.

Relevant code snippets:

pages/index.html.erb[3]

<div class="collapse-group">
<div class="collapse" id="viewdetails">

<div class="form-group col-md-6">
  <%= f.label :title %><br>
  <%= f.text_field :title, class: "form-control" %>
</div>
<div class="form-group col-md-6">
  <%= f.label :short %><br>
  <%= f.text_field :short, class: "form-control" %>
</div>

</div>
<a class="btn btn-success showdetails" data-toggle="collapse" data-target="#viewdetails"></a>
</div>
</div>

custom.css.scss[4]

.collapse.in+a.btn.btn-success.showdetails:before
{
    content:'Hide details';
}
.collapse+a.btn.btn-success.showdetails:before
{
    content:'Show details';
}

Sorry about this post if anything is off (first post and <10 rep as well). I'm hoping to use existing apis/jQuery to handle this as the example does, but this issue has stumped me and no amount of searching has returned a reason for it.

Answer 1

Looks like Bootstrap removes the class 'collapse' once an element is expanded so

.collapse.in+a.btn.btn-success.showdetails:before
{
    content:'Hide details';
}

never actually exists.

Try this instead:

.in + a.btn.btn-success.showdetails:before {
    content: "Hide Details";
}