0

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.

Gizmokid2005
  • 3
  • 3

1 Answers1

0

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";
}
Will
  • 4,075
  • 1
  • 17
  • 28
  • Awesome, thanks @Will! That seems to have taken care of the button text. Any thoughts on why moving the button above the collapse div would cause it to not have text while the functions still work? – Gizmokid2005 Jan 29 '14 at 13:43
  • Yes. The text is being added with CSS' sibling selector (the + sign). You're saying "Anytime there is a `.collapse` element followed by an `a.btn...` element, add this content". If you move the `a.btn` to before the `.collapse` element in the HTML it's no longer the next sibling. You'd have to use a different selector or use css positioning to move it up. – Will Jan 29 '14 at 19:23
  • Thanks again @Will. I think I follow what you're saying, I'm going to try and give it a shot and see if I can figure that out. – Gizmokid2005 Jan 30 '14 at 01:01
  • I tried a ton of different variations trying to understand exactly what you were explaining, but while I can get the "Show details" portion to work (though I'm not convinced the css is entirely correct for that, no amount of my tinkering allows it to work correctly. Of course, the button still works in all cases. The updated code has been pushed in the relevant places as the original post. – Gizmokid2005 Jan 30 '14 at 02:27