Shadow effect on the dropdown body with accordion style

I've been developing an accordion control for my website that is nested inside a card. I have applied a box shadow to the header of the accordion which looks fine, but when it expands, the body pops up with a shadow as well. I'm trying to figure out a solution where the shadow remains on the body without popping out when the accordion is expanded. Here's an example I've set up:

/* Custom CSS styles */

.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">
          Accordion 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 -->
            Accordion Body
            <!-- End collapse panel content -->

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

Is there a way to create a smooth transition so it appears like the box shadow surrounds both elements when the accordion is expanded?

javascripthtmlcssbootstrap-4

Answer №1

Absolutely! Simply add the box shadow to the container of the target element. In this scenario, apply it to the .post-card container.

/* Custom CSS styles go here and will override bootstrap.css */

.recent-posts {
  background: #D2C198;
}

.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;
}

...
... <!-- More code snippets follow -->
...

</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adding JavaScript code to Rails erb snippets

I have a complex select block created using Rails erb, and I now need to convert it to jQuery using append. Here is the original select block: <select id="mission_reward" name="mission_reward" class="select_reward"> <option value="0"><%= ...

javascriptjqueryhtmlruby-on-rails

While examining the HTML elements, it appears that they are not in their correct positions

Here's a visual representation of the issue. Imagine my mouse cursor as the red painted mouse because print screen doesn't capture the actual cursor. Oddly enough, the element is being highlighted even though the cursor is not directly positione ...

htmlcssvue.jsflexboxweb-inspector

Why is it that one of my useQuery hooks is returning a value while the other one is returning undefined?

I'm currently facing an issue with React Query where one of my useQuery hooks is logging undefined while the other one is displaying the correct data. Both functions are async and perform similar tasks. I've been troubleshooting this problem for ...

javascriptreactjsdebuggingreact-query

The HTML code appears to be functioning correctly in all web browsers except for Safari

There appears to be an issue with submitting the form in Safari browser. The form functions correctly in all browsers except for Safari. <form action="/commonDashboard" name="loginForm" method="post" autocomplete="off" id="loginForm"> <div&g ...

htmlsafari

Unable to change Bootstrap variables within a Next.js project

I'm having trouble changing the primary color in Bootstrap within my NextJS project. I've tried different methods but nothing seems to work as expected. Here is the code snippet from my "globals.scss" file that I imported in "_app.js": $primary: ...

htmlcsstwitter-bootstrapsassnext.js

Tips for focusing on a background image without being distracted by its child elements

I am trying to create a zoom effect on the background-image with an animation but I am encountering issues where all child elements are also animated and zoomed. When hovering over the element, I want only the background part to be animated and zoomed, and ...

htmlcsstwitter-bootstrapcss-selectors

Retrieve the location of the selected element

We are faced with the challenge of determining the position of the button clicked in Angular. Do you think this is achievable? Our current setup involves an ng-grid, where each row contains a button in column 1. When the button is clicked, we aim to displ ...

javascriptangularjs

How do I set up Firebase functions to trigger onWrite when listening for a specific child just once?

Is there a way to access the child under a different node each time the Firebase onWrite function is triggered? To retrieve this child, you can use the following code: {const saatt = (context.database.ref('kullanicilar/1111/marina1/2021/1saat'). ...

javascriptnode.jsgoogle-cloud-functions

Attaching to directive parameters

I've been working on creating a draggable div with the ability to bind its location for further use. I'm aiming to have multiple draggable elements on the page. Currently, I've implemented a 'dragable' attribute directive that allo ...

javascriptangularjs

An innovative approach for converting CSS animations to flutter projects

During a recent collaboration with fellow designers, they shared some CSS animation examples from CodePen that needed to be integrated into our current project. The animations ranged from simple to complex, like the following: * { margin: 0; padding ...

cssflutterflutter-animationcodepen

Is it possible to share deep links with just a hashtag?

I am currently developing a web application and I want to include social media buttons such as Facebook Like. I have tried using the HTML code/API provided by Facebook, AddThis, Shareaholic, ShareThis, but none of them seem to properly handle my deep link ...

htmlajaxfacebookdeep-linkingaddthis

Using jQuery to apply CSS to elements with multiple potential values

Here's a simple question: using jQuery's css function, you can retrieve the computed style of a CSS attribute. But what if there are multiple styles for that attribute being rendered simultaneously? Let's consider this example: <div id=" ...

javascriptjquerycss

Is there a way for us to determine the time at which the user last took a screenshot or photo?

I am currently developing a website using Django and I have a unique requirement. I need to access the last image that a user has taken on their phone, without the image being shared by anyone else. The photo must be captured by the user's device itse ...

javascriptjqueryreactjsdjangoangularjs

Is it possible to conduct an auction in JavaScript without using the settimeout or setinterval functions?

I'm currently working on creating an auction site and I need help improving its speed and performance. I've been using setInterval and setTimeout functions for the countdown, but it's quite slow as a request is sent to the server every secon ...

phpjavascriptnode.jssocket.io

Chosen Dropdown selection - Retrieve/Receive information

One of the challenges I'm facing involves a dropdown list on my web form that contains various dates. My main query is: How can I retrieve data for the selected date from a MySQL database and present it to the user? Additionally, if the chosen date do ...

phpjavascriptmysqlhtml

PHP Data Division

It's common knowledge that code should always be separated from content and design, not just in PHP. (Despite some people disagreeing with this concept) Especially in larger projects, mixing HTML with PHP like this can lead to messy code. <?php ...

phphtml

Having trouble with the JavaScript DOM rewrite for aligning text?

function modifyTextAlignment(){ document.getElementById("th1").style.textAlign = "right"; } #th1{ text-align:left; } <table> <tr><center><th colspan="2" id="th1">List of Important Emergency Contacts</th><center></tr& ...

javascriptjqueryhtmlcss

Showing and hiding div elements

I am looking to enhance this toggle function by making the div content retract and hide when the same link is clicked again. Additionally, I would like it to retract completely when a different link is clicked before the associated content slides down. Fu ...

javascriptjqueryhtmlcss

Clicking on the search box will remove the item that is currently displayed

Currently, I am working on creating a dropdown menu that includes a text box. The goal is for the items to appear when the text box is clicked, and for the selected item to turn green once clicked and then display in the text box. I'm interested in fi ...

javascriptangularjsdom

Bootstrap 4 custom dropdown menu

Looking to revamp the design of my dropdown menu, but struggling to achieve the desired outcome. My goal is to have the drop-down menu match the size of its container. (refer to screenshot below) I've attempted various modifications to the dropdown- ...

twitter-bootstrapdrop-down-menubootstrap-4