# Adding a Show / Hide Feature to Your Bootstrap 4 Divs

DevFeed: [Adding a Show / Hide Feature to Your Bootstrap 4 Divs](<https://devfeed.tech/articles/adding-a-show-hide-feature-to-your-bootstrap-4-divs-28130.md>)

Original publisher: [Read original article](<http://fuzzyblog.io/blog/bootstrap/2019/11/10/adding-a-show-hide-feature-to-your-bootstrap-divs.html>)

Author: Fuzzygroup

Published: 2019-11-10T00:00:00Z

Content type: tutorial

Language: en

Sources: [Scott Johnson](<https://devfeed.tech/sources/scott-johnson.md>)

Topics: [Bootstrap](<https://devfeed.tech/topics/bootstrap.md>), [CSS](<https://devfeed.tech/topics/css.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [bootstrap](<https://devfeed.tech/tags/bootstrap.md>), [css](<https://devfeed.tech/tags/css.md>), [html](<https://devfeed.tech/tags/html.md>)

## AI overview

A concise tutorial showing how to add a click-triggered show/hide feature to Bootstrap 4 content using a collapsible div, an anchor, and matching data attributes.

## Source excerpt

I know this is simple but I am JavaScript / CSS challenged so I'm writing it down because I've had continuous problems with it in the past and I know that this solution works for Bootstrap 4. Let's say that you have a div that you want hidden and only displayed by a button when you click it. Here's the solution: <a href="#feeds" class="btn btn-default" data-toggle="collapse">Toggle Feeds</a> <div id="feeds" class="collapse"> This div (feeds) is hidden by default. </div> Here's how this works: Add a div named feeds around the content you want hidden. This needs to have a class named collapse added to it because its default display state is collapsed. Add an A tag with an href of "#feeds" above the content and a data-toggle named collapse. When the user clicks the A tag then the a tag's data-toggle will be applied to the matching div. Thank you to this Stack Overflow post.