Bootstrap Style Collapsible Section

I'm trying to add Bootstrap style Collapsible sections to a content page. Everything seems to work well in the editor:[list]

[]IMG 1 Closed

[
]IMG 2 Open

[/list]

but when I actually look at it in the cart, it obviously is missing something:[list]

[*]IMG 3 Live View

[/list]

```php







Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.







Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.







Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.





```

anyone else run into a similar issue?

Hey AgentEccks,



Have you had any luck finding a solution to this?



We're having almost the exact same problem with a bootstrap toggle button.



I've had a look at the less, and it looks like the responsive theme only includes selected bootstrap files, not the whole library (grid.less, mixins.less etc, but not buttons.less).



I've tried including those myself, but it seems to break the rest of the layout.

[quote name='matthew.erwin' timestamp='1437391325' post='223586']

Hey AgentEccks,



Have you had any luck finding a solution to this?



We're having almost the exact same problem with a bootstrap toggle button.



I've had a look at the less, and it looks like the responsive theme only includes selected bootstrap files, not the whole library (grid.less, mixins.less etc, but not buttons.less).



I've tried including those myself, but it seems to break the rest of the layout.

[/quote]



Hi matthew.erwin,



We achieved this effect. What we did was:[list]

[]From Bootstrap, we customized the JS needed to handle such effect (we exactly used the toggle button and also the collapsible panels that AgentEccks was trying to implement).We followed the instructions here: [url=“Redirecting…”]http://getbootstrap.com/customize/[/url] (I'm not sure to remember it accurately, but I think we only required the transition plugin and the collapse plugin)

[
]We gave a different name to the minified js file (in our case it was named bootstrap-[project-name-here].min.js)

[]We copied this file in the directores structure, under the folder route: js/lib/[project-folder-name]/

[
]We activated the my_changes addon

[]We created this folder structure in our theme folder: design/themes/[theme-name]/templates/addons/my_changes/hooks/index/

[
]Inside this folder, we created a file named: scripts.post.tpl

[*]This file contained simply the call to the JS customized file. In our case:

[/list]

{script src="js/lib/[project-folder-name]/bootstrap-[project-name-here].min.js"}



And that was all for the setup Then, of course, we created the html as you did (more or less).



Hope you can manage to use it, or at last to guide you a little. Hopefully somebody can come with a more elegant way to do this…



Regards,