{"id":1885,"date":"2018-04-28T00:30:46","date_gmt":"2018-04-28T05:30:46","guid":{"rendered":"http:\/\/bluegalaxy.info\/codewalk\/?p=1885"},"modified":"2018-04-28T00:30:46","modified_gmt":"2018-04-28T05:30:46","slug":"jquery-make-room-divs-clicking-div-show-hidden-content","status":"publish","type":"post","link":"https:\/\/bluegalaxy.info\/codewalk\/2018\/04\/28\/jquery-make-room-divs-clicking-div-show-hidden-content\/","title":{"rendered":"jQuery: How to make room between divs when clicking a div to show hidden content"},"content":{"rendered":"

I created some div bars with HTML & CSS that look like this:<\/p>\n

\"\"<\/p>\n

and I wanted functionality such that when I click any of the gray div bars, the rest of the divs make room for a hidden blue div to appear below the bar. For example:<\/p>\n

\"\"<\/p>\n

Then, clicking the bar again will make the hidden div disappear and make the space between the divs collapse back to what it was previously. I solved this problem using jQuery. For example:<\/p>\n

$(function() {\r\n    $(\".bar\").click(function() {\r\n        $(this).next(\".hidden-data\").toggle();\r\n    });\r\n});<\/pre>\n
This basically says, when a bar is clicked, toggle visibility of the next div.<\/p>\n
Here is a codepen that demonstrates this working, which also shows the HTML and CSS used. Notice that the hidden div appears instantly when a bar is clicked:<\/p>\n
\nSee the Pen Click bar to show hidden data with jQuery (small bars) by Chris Nielsen (@Chris_Nielsen) on CodePen.<\/p>\n\n
 <\/p>\n
In order to make the expanding divs animate smoothly, I added a CSS keyframes animation. For example:<\/p>\n
.hidden-data {\r\n  display: none;  \r\n  width: 350px;\r\n  height: 70px;\r\n  border: solid 1px #aaa;\r\n  border-radius: 8px;\r\n  padding: 20px;\r\n  font-size: 24px;\r\n  margin: 15px;\r\n  background-color: #e6eeff;\r\n  z-index: 1;\r\n  animation-name: slideDown;\r\n  animation-duration: .4s;\r\n  animation-fill-mode: forwards;\r\n}\r\n\r\n@keyframes slideDown {\r\n    0% { height: 0px; }\r\n    100% { height: 70px; }\r\n}<\/pre>\n
 <\/p>\n
Here is how the final result animates (codepen):<\/p>\n
\nSee the Pen Click bar to show hidden data with jQuery (small bars) with CSS keyframes by Chris Nielsen (@Chris_Nielsen) on CodePen.<\/p>\n\n
 <\/p>\n
For more information about jQuery .next(), see:
\nhttps:\/\/www.w3schools.com\/jquery\/traversing_next.asp<\/a>
\nhttps:\/\/api.jquery.com\/next\/<\/a><\/p>\n
For more information about jQuery .toggle(), see:
\nhttps:\/\/www.w3schools.com\/jquery\/eff_toggle.asp<\/a>
\nhttps:\/\/api.jquery.com\/toggle\/<\/a><\/p>\n
For more information about CSS keyframes, see:
\nhttps:\/\/www.w3schools.com\/cssref\/css3_pr_animation-keyframes.asp<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
I created some div bars with HTML & CSS that look like this: and I wanted functionality such that when I click any of the gray div bars, the rest of the divs make room for a hidden blue div to appear below the bar. For example: Then, clicking the bar again will make the … Continue reading jQuery: How to make room between divs when clicking a div to show hidden content<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44,128],"tags":[133,10,105,123,132,131],"class_list":["post-1885","post","type-post","status-publish","format-standard","hentry","category-javascript-language","category-jquery","tag-keyframes","tag-css","tag-html","tag-jquery","tag-next","tag-toggle"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1885","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=1885"}],"version-history":[{"count":9,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1885\/revisions"}],"predecessor-version":[{"id":1896,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1885\/revisions\/1896"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=1885"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=1885"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=1885"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}