title: Accordion expand card with react and css
body: <p>I'm trying to make this card in such a way that when you click on view details, the card's blue footer should expand in height and shows the lorem text, and then clicking on another card the previous card will get collapsed. The issue is when I click on <code>view details</code> the card's blue bottom is not expanding with the lorem. Here is my sandbox: <a href="https://codesandbox.io/s/wonderful-bohr-by01z?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/wonderful-bohr-by01z?file=/src/App.js</a></p>
  <p>App.js:</p>
  <pre><code>import { Card, Footer, Header } from &quot;./styles&quot;;
  import { useState } from &quot;react&quot;;
  
  export default function App() {
    const [expanded, setExpanded] = useState(false);
  
    return (
      &lt;&gt;
        &lt;Card&gt;
          &lt;Header&gt;last viewed: {null}&lt;/Header&gt;
          &lt;Footer&gt;
            &lt;span onClick={() =&gt; setExpanded(!expanded)}&gt;View Details&lt;/span&gt;
            {expanded &amp;&amp; (
              &lt;div className=&quot;accodion&quot;&gt;
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eos,
                facilis. Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                Eos, facilis. Lorem, ipsum dolor sit amet consectetur adipisicing
                elit. Eos, facilis. Lorem, ipsum dolor sit amet consectetur
                adipisicing elit. Eos, facilis.
              &lt;/div&gt;
            )}
          &lt;/Footer&gt;
        &lt;/Card&gt;
      &lt;/&gt;
    );
  }
  </code></pre>
  <p>styles.js:</p>
  <pre><code>import styled from &quot;styled-components&quot;;
  
  const Card = styled.div`
    background-color: ${({ isEmpty }) =&gt; (isEmpty ? &quot;#FAFAFA&quot; : &quot;white&quot;)};
    height: 100%;
    border-radius: 20px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    margin: 8px;
  `;
  
  const DropDown = styled.div`
    background-color: lightblue;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  `;
  
  const Header = styled.div`
    display: flex;
    justify-content: space-between;
    margin-top: -40;
    font-size: 10px;
    color: #7894b0;
    margin: 16px;
  `;
  const Footer = styled.div`
    background-color: rgb(242, 247, 251);
    width: 100%;
    height: 50px;
    font-size: 12px;
    line-height: 12px;
    color: #4f4f4f;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
  
    .accodion {
      padding: 30px;
    }
  `;
  
  export { Card, Header, Footer, DropDown };
  </code></pre>