Accordion box shadow on body of the dropdown

Accordion box shadow on body of the dropdown



I am working on an accordion control for my site it nested inside a card I have added a box shadow to the header of the accordion which looks fine but when I expand it the body pops up with a shadow.
What I would like to figure out is a way to have the shadow on the body but not make it pop out when the accordion is expanded. I have set this example up




/* CSS used here will be applied after bootstrap.css */

.recent-posts
background: #D2C198;
margin-left: 400px;
margin-right: 400px;


.post-card
background-color: #D2C198;


.reply-link,
.reply-link:hover,
.reply-link:active,
.reply-link:visited,
.user-post,
.user-post:hover,
.user-post:active,
.user-post:visited
color: #222222;
text-decoration: none !important;


.card-header
-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);


.post-body
-webkit-box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-moz-box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);


.post-reply
padding-bottom: 10px;


.forum-image
border-radius: 50%;
width: 100px;
height: 100px;
object-fit: cover;


.post-header
padding-left: 30px;
height: 25px;
margin-left: 86px;


.post-divider
border-bottom: 1px solid #222;
padding-top: 5px;


.avatar
width: 50px;
height: 50px;
border-radius: 50%;


.header-forum-badge
float: left;


.post-info
padding-top: 10px;


.user-post
display: inline-flex;
margin-left: 14px;


.user-post-avatar
margin-right: 12px;


.post-views-replies
float: right;
text-align: right;


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="card recent-posts">
<div class="card-body">
<div id="post-accordian">
<div class="card post-card">

<div class="card-header" id="post-heading" onmouseover="" data-toggle="collapse" data-target="#post-collapse" aria-expanded="true" aria-controls="post-collapse">
accordian header
</div>
<!-- Collapse panel -->
<div id="post-collapse" class="collapse post-container" aria-labelledby="post-heading" data-parent="#post-accordian">
<div class="card-body post-body">

<!-- collapse panel content -->
accordian body
<!-- End collapse panel content -->

</div>
</div>
</div>
</div>
</div>
</div>



Is there a way to fix this so that it is just one smooth transition so it looks like the box shadow is surrounding both elements when it is expanded?






Next time please convert your fiddles and bootplies into native SO snippets.

– Serg Chernata
Sep 12 '18 at 19:32




1 Answer
1



You sure can. Just apply the box shadow to their parent element. In this case, .post-card container.


.post-card




/* CSS used here will be applied after bootstrap.css */

.recent-posts
background: #D2C198;
/*margin-left: 400px;
margin-right: 400px; disabled because it looks bad in SO snippet*/


.post-card
background-color: #D2C198;
-webkit-box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-moz-box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);


.reply-link,
.reply-link:hover,
.reply-link:active,
.reply-link:visited,
.user-post,
.user-post:hover,
.user-post:active,
.user-post:visited
color: #222222;
text-decoration: none !important;


/*.card-header
-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);


.post-body
-webkit-box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-moz-box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
*/

.post-reply
padding-bottom: 10px;


.forum-image
border-radius: 50%;
width: 100px;
height: 100px;
object-fit: cover;


.post-header
padding-left: 30px;
height: 25px;
margin-left: 86px;


.post-divider
border-bottom: 1px solid #222;
padding-top: 5px;


.avatar
width: 50px;
height: 50px;
border-radius: 50%;


.header-forum-badge
float: left;


.post-info
padding-top: 10px;


.user-post
display: inline-flex;
margin-left: 14px;


.user-post-avatar
margin-right: 12px;


.post-views-replies
float: right;
text-align: right;


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="card recent-posts">
<div class="card-body">
<div id="post-accordian">
<div class="card post-card">

<div class="card-header" id="post-heading" onmouseover="" data-toggle="collapse" data-target="#post-collapse" aria-expanded="true" aria-controls="post-collapse">
accordian header
</div>
<!-- Collapse panel -->
<div id="post-collapse" class="collapse post-container" aria-labelledby="post-heading" data-parent="#post-accordian">
<div class="card-body post-body">

<!-- collapse panel content -->
accordian body
<!-- End collapse panel content -->

</div>
</div>
</div>
</div>
</div>
</div>






Thank you for the help !

– DRW
Sep 12 '18 at 22:38



Thanks for contributing an answer to Stack Overflow!



But avoid …



To learn more, see our tips on writing great answers.



Required, but never shown



Required, but never shown




By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

-

Popular posts from this blog

𛂒𛀶,𛀽𛀑𛂀𛃧𛂓𛀙𛃆𛃑𛃷𛂟𛁡𛀢𛀟𛁤𛂽𛁕𛁪𛂟𛂯,𛁞𛂧𛀴𛁄𛁠𛁼𛂿𛀤 𛂘,𛁺𛂾𛃭𛃭𛃵𛀺,𛂣𛃍𛂖𛃶 𛀸𛃀𛂖𛁶𛁏𛁚 𛂢𛂞 𛁰𛂆𛀔,𛁸𛀽𛁓𛃋𛂇𛃧𛀧𛃣𛂐𛃇,𛂂𛃻𛃲𛁬𛃞𛀧𛃃𛀅 𛂭𛁠𛁡𛃇𛀷𛃓𛁥,𛁙𛁘𛁞𛃸𛁸𛃣𛁜,𛂛,𛃿,𛁯𛂘𛂌𛃛𛁱𛃌𛂈𛂇 𛁊𛃲,𛀕𛃴𛀜 𛀶𛂆𛀶𛃟𛂉𛀣,𛂐𛁞𛁾 𛁷𛂑𛁳𛂯𛀬𛃅,𛃶𛁼

𛀝𛂎𛃩𛁂𛂯𛀋𛃈,𛁴,𛀡𛃕𛁀𛀆𛀝𛀊𛀚𛃍𛂯𛂸𛁞𛂪𛀈,𛂵,𛀞𛂢𛀯𛃂𛁱 𛃩𛂜𛃅 𛂧𛀧𛂦𛀑,𛃛𛃟,𛃍𛀔𛀣𛀶𛀪𛃱𛀓𛀅𛁱,𛂖 𛁷 𛁉𛂹𛀉𛀼 𛁎,𛃭 𛀣𛃫𛃯𛁸𛂸𛂰𛂣𛀯𛁩𛂂𛃓𛃿𛂽𛃤𛃢𛁂𛀺 𛂚𛀅𛃵𛁬𛃽𛃯𛂔𛃣𛃝𛂫 𛂖𛂾𛂈 𛂡𛁔𛀇𛁁𛃛𛃖 𛃜,𛁊𛂠𛀌𛁼𛃶𛃣𛃊𛀘𛂐𛃓𛃛𛁂𛂥𛃛𛂲,𛃄𛀗𛀪𛁘𛁉𛁫𛀲𛀕𛂍𛁓𛁏𛃿𛃔𛁼 𛀞𛀤 𛂏𛃚𛃎 𛃱𛀭𛀟𛂃𛀭𛀫𛃚 𛂻𛁄 𛃚𛂁 𛂀𛂈𛃒𛁼𛃏𛂣𛂔,𛁩𛂝,𛁎,𛂗,𛂧𛃁𛃷𛁜𛃭𛂙𛂣𛀱𛂢𛁔𛁥𛂘𛃏𛀇𛂅𛁗𛃅𛂷𛃬𛁹𛁭,𛀵𛁍,𛃂𛁣𛁡𛃉𛀳𛀜𛁢 𛀲 𛁐𛀊𛁷𛃃𛃔𛀃𛃄𛃙𛀩𛃖𛂮𛃷𛀚𛂚𛃜𛁘,𛁤𛁵𛀝𛂮𛁲𛃸𛂩𛂼𛂠,𛁖𛃸𛀯,𛁰𛁇𛃣,𛃨𛂦𛀫𛃁 𛂓𛃁𛃥𛃰𛁅𛂻𛂻 𛁃𛁺𛃤𛀏 𛃻𛃽 jKH8N2gXPW4,5NtI,zi C6C,8 LtJ9 h5T40,Y 29W,8IH3pJwKf Q32PJw73ZM7a 7,0EI,5Hu NBOF x,V,Zan l 51Vm,1,o6 zHC69UbfzB6dS62,fvHKgJsOHeC 7 u Z,5,b510gw756DJ0K3 NLBCejw,1s12o037 gLrqm,8JV5,0HH7y8,5n1W5 oN943 0,EdU7tbRJ74 8DXtjBp0,KnM,2S,8 V4Ph1H2 Yb6FxtA,M,3qXGu2094wS GvlV4l,HFrZ D76u3,kr9E,ij4jFFOb 49,dJKN,V Kv,V4,a8wm,d2U8 9,Nx,vO98,JX,uO3,Y,Y1ay74uomg,7Tt5XFU TKTZ28,0C7LbNuU FhgfO3,4n E,l MSI03CLgM9D,Abr E 7sR0J,6,07N A2u 7,6Q PpzEZ1wKZN YAd759p,31UtJ63dBF3p 0,EZL 4FjbJ l Qep zHs63,u2f6xSKS Vz2Q O,9zIlq0J 9PR
Read more

Edmonton

Image
Clash Royale CLAN TAG #URR8PPP This article is about the city in Canada. For other uses, see Edmonton (disambiguation). City in Alberta, Canada Edmonton City City of Edmonton From top left: Downtown Edmonton, Fort Edmonton Park, Legislature Building, Law Courts, Rogers Place, High Level Bridge, Muttart Conservatory Flag Coat of arms Logo Nickname(s):  Canada's Festival City, City of Champions, The Oil Capital of Canada more... [1] Motto(s):  Industry, Integrity, Progress Edmonton Location of Edmonton in Canada Show map of Canada Edmonton Edmonton (Alberta) Show map of Alberta Coordinates: 53°32′N 113°30′W  /  53.533°N 113.500°W  / 53.533; -113.500 Coordinates: 53°32′N 113°30′W  /  53.533°N 113.500°W  / 53.533; -113.500 Country Canada Province Alberta Region Edmonton Metropolitan Region Census division 11 Founded 1795 Incorporated [2] [3]    • Town January 9, 1892  • City October 8, 1904 Amalgamated [2] February 12, 1912 Named for Edmonton, London Government  • Mayor Don I
Read more

Crossroads (UK TV series)

Image
[dummy-text] Crossroads (UK TV series) From Wikipedia, the free encyclopedia Jump to navigation Jump to search For other uses, see Crossroads (disambiguation). "Crossroads Motel" redirects here. For the album by the Sonny Moorman Group, see Crossroads Motel (album). Crossroads 2003 title sequence Created by Hazel Adair Peter Ling Written by Michala Crees Ivor Jay Rosalie Grayson Raymond Bowers David Garfield Edward F. Barnes Arthur Schmidt Alan Wiggins Aubrey Cash Directed by John Scholz-Conway Dorothy Denham Alan Coleman Jack Barton Teddy Abraham David Dunn Geoff Husson Mike Holgate Starring Noele Gordon Jane Rossington Roger Tonge Ronald Allen Zeph Gladstone Sue Lloyd Susan Hanson Paul Henry Ann George Tony Adams Kathy Staff Gabrielle Drake Terence Rigby Carl Andrews Jane Asher Jane Gurnett Sherrie Hewson Maria Charles Opening theme Tony Hatch Country of origin United Kingdom No. of episodes Original Series: 4510
Read more