title: How do you correctly use CSS animation delays to create a collapsible HTML container?
body: <p>I am attempting to use responsive CSS animation delay to make a accordion type of action happen when a user clicks on a arrow connected to a table without Javascript and only HTML/CSS.</p>
  
  <p>Seen here when you resize the screen to mobile: <a href="https://web.archive.org/web/20190523104045/http://responsiveemailpatterns.com/patterns/accordions/full-to-accordion.html" rel="nofollow noreferrer">https://web.archive.org/web/20190523104045/http://responsiveemailpatterns.com/patterns/accordions/full-to-accordion.html</a></p>
  
  <p>Here's a picture of what I'm trying to do: <a href="https://imgur.com/a/c0Wtk" rel="nofollow noreferrer">https://imgur.com/a/c0Wtk</a></p>
  
  <p>I commented the CSS block and HTML section with ACCORDION to note where I am trying to code correctly. Whenever I click on the arrow of my box, it acts like an anchor tag and does not collapse the container as shown in the picture. Is there anyway to correct this code without using Javascript or JQuery?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; }
  .msofix {mso-table-lspace: -1pt; mso-table-rspace:-1pt}
  body{padding:0; margin:0;}   
  
  @media only screen and (max-width: 480px) {
   div[class=divSecMobile]{
     display: block !important;
     max-height: none !important;
     overflow: visible !important;
     font-size: inherit !important;
     line-height: 23px !important;
   }
  
   div[class=divSecDesktop]{
     display:none !important;
   }
    
   .divSecDesktop {
     display:none!important;
   }
  
   .divSecMobile {
     display:block!important;
     max-height:none!important;
     overflow:visible!important;
     font-size:inherit !important;
     line-height:23px!important;
   } 
   table[class=tblEmail] {
    width: 100% !important;
   }
  
   table[class=tblContent] {
    width: 100% !important;
   }
   /*Begin Accordion*/
    table[class=pattern] .story td {
    max-height: 0;
    overflow: hidden;
    margin: 0;
   }
   table[class=pattern] .story td a { display: block; position: relative; }
   table[class=pattern] .story td a:after {
    content: '+';
    position: absolute;
    top: 0;
    right: 0;
    display: block;
   }
   table[class=pattern] #story1:target td {
    max-height: 999px;
    margin: 16px 0;
    -webkit-transition: max-height 0.5s ease-out;
    -moz-transition: max-height 0.5s ease-out;
    -ms-transition: max-height 0.5s ease-out;
    -o-transition: max-height 0.5s ease-out;
    transition: max-height 0.5s ease-out;
   }
   /*End of Accordion*/
   td[class=tdPolicyAndDetails]{
    border:2px solid #002663 !important;
   }
  }
     .auto-style1 {
      margin-bottom: 0px;
     }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table width="600" bgcolor="#ffffff" class="tblEmail" cellpadding="0" cellspacing="0" align="center" style="mso-table-lspace: -1pt; mso-table-rspace: -1pt; border-collapse: collapse" &gt;
   
   &lt;!--Begin Accordion --&gt;
   &lt;tr&gt;
    &lt;td style="border-right:2px solid #002663;border-left:2px solid #002663;border-top:2px solid #002663;"&gt;
     &lt;table cellpadding="0" cellspacing="0" width="100%" class="pattern"&gt;
      &lt;tr&gt;
       &lt;td width="20%" bgcolor="002663" style="color:#ffffff;font-size:50px;text-align:center;" class="story"&gt;
        &lt;a href="#story1"&gt;&lt;img src="http://image.email-libertymutual.com/lib/fecc16717d67067e/m/1/Icon_Chevron_Closed_3x.png" width="11" height="17" style="border: none;" /&gt;&lt;/a&gt;
       &lt;/td&gt;
       &lt;td width="80%" style="padding:15px 15px 15px 10px;"&gt;
        &lt;table width="100%" cellpadding="0" cellspacing="0" border="0"&gt;
         &lt;tr&gt;
          &lt;td style="font-family: Arial, Helvetica, sans-serif; text-align:center; font-size:14px; line-height:20px;color:#002663;text-align:left;white-space:nowrap;"&gt;
           &lt;b&gt;Policy #:&lt;/b&gt; &lt;font color="#616265"&gt;A23-3434-43243-343&lt;/font&gt;
          &lt;/td&gt;
         &lt;/tr&gt;
         &lt;tr&gt;
          &lt;td style="font-family: Arial, Helvetica, sans-serif; text-align:center; font-size:14px; line-height:20px;color:#002663; text-align: left;white-space:nowrap;"&gt;
           &lt;b&gt;Policy Period:&lt;/b&gt; &lt;font color="#616265"&gt;02/02/2014 - 02/03/2017&lt;/font&gt;
          &lt;/td&gt;
         &lt;/tr&gt;
        &lt;/table&gt;
       &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
       &lt;td width="20%" style="color:#ffffff;text-align:center; padding:20px 0px 0px 20px;" align="right" valign="top"&gt;
        &lt;img src="http://image.email-libertymutual.com/lib/fecc16717d67067e/m/1/auto_icon_3x.png" width="29" height="21" style="border:none" /&gt;
       &lt;/td&gt;
       &lt;td width="80%" style="padding:15px 0px 15px 10px;"&gt;
        &lt;table width="100%" cellpadding="0" cellspacing="0" border="0"&gt;
         &lt;tr&gt;
          &lt;td style="font-family: Arial, Helvetica, sans-serif; text-align:center; font-size:16px; line-height:20px;color:#002663;text-align:left;font-weight:bold;"&gt;
           &lt;!--%%[IF Policy1_LOB=="Auto" THEN]%%--&gt;
           Vehicles Insured:
           &lt;!--%%[ELSEIF Policy1_LOB=="Condo" OR Policy1_LOB=="Renters" or Policy1_LOB=="Home" THEN]%%--&gt;
           Home Insured:
           &lt;!--%%[ENDIF]%%--&gt;
          &lt;/td&gt;
         &lt;/tr&gt;
         &lt;!--%%[IF Policy1_LOB=="Auto" THEN]%%--&gt;
         &lt;tr&gt;
          &lt;td class="tdVehicleInfo" colspan="2" style="padding:20px 0px 10px 0px;font-family: Arial, Helvetica, sans-serif; text-align:left; font-size:14px; line-height:18px; color:#002663;font-weight:bold;"&gt;
           %%Policy1_Vehicle1%%
          &lt;/td&gt;
         &lt;/tr&gt;
         &lt;tr&gt;
          &lt;td class="tdVehicleInfo" colspan="2" style="padding:0px 0px 10px 0px;font-family: Arial, Helvetica, sans-serif; text-align:left; font-size:14px; line-height:18px; color:#002663;font-weight:bold;"&gt;
           %%Policy1_Vehicle2%%
          &lt;/td&gt;
         &lt;/tr&gt;
         &lt;tr&gt;
          &lt;td class="tdVehicleInfo" colspan="2" style="padding:0px 0px 10px 0px;font-family: Arial, Helvetica, sans-serif; text-align:left;font-size:14px; line-height:18px; color:#002663;font-weight:bold;"&gt;
           %%Policy1_Vehicle3%%
          &lt;/td&gt;
         &lt;/tr&gt;
         &lt;tr&gt;
          &lt;td class="tdVehicleInfo" colspan="2" style="padding:0px 0px 10px 0px;font-family: Arial, Helvetica, sans-serif; text-align:left; font-size:14px; line-height:18px; color:#002663;font-weight:bold;"&gt;
           %%Policy1_Vehicle4%%
          &lt;/td&gt;
         &lt;/tr&gt;
         &lt;tr&gt;
          &lt;td class="tdVehicleInfo" colspan="2" style="padding:0px 0px 10px 0px;font-family: Arial, Helvetica, sans-serif; text-align:left; font-size:14px; line-height:18px; color:#002663;font-weight:bold;"&gt;
           %%Policy1_Vehicle5%%
          &lt;/td&gt;
         &lt;/tr&gt;
         &lt;tr&gt;
          &lt;td class="tdVehicleInfo" colspan="2" style="padding:0px 0px 10px 0px;font-family: Arial, Helvetica, sans-serif; text-align:left; font-size:14px; line-height:18px; color:#002663;font-weight:bold;"&gt;
           %%Policy1_Vehicle6%%
          &lt;/td&gt;
         &lt;/tr&gt;
         
        &lt;/table&gt;
       &lt;/td&gt;
      &lt;/tr&gt;
     &lt;/table&gt;
    &lt;/td&gt;
   &lt;/tr&gt;
   &lt;!--%%[IF Policy1_State!="MA" OR Policy1_LOB!="Umbrella" OR Policy1_LOB!="Home" THEN]%%--&gt; 
   &lt;tr&gt;
    &lt;td class="tdIDCards" width="100%" style="padding: 0px 30px 20px 20px; font-family: Arial, Helvetica, sans-serif; font-size:14px; line-height:14px; color:#616265;text-align:left;border-right:2px solid #002663;border-left:2px solid #002663;border-bottom:2px solid #002663;"&gt;
    Your ID cards are available online and a paper copy is being mailed to you.
    &lt;/td&gt;
   &lt;/tr&gt;
   &lt;!--%%[ENDIF]%%--&gt;
  &lt;!--End Accordion--&gt;
      
  &lt;/table&gt;&lt;!--tblEmail--&gt;</code></pre>
  </div>
  </div>
  </p>