Custom code drop down not working inside region

I've created a custom accordion using HTML & CSS for my services section on my homepage (see screenshot), but it doesn't seem to be working live. Any ideas?

  • Nastia

    Hello richard, I hope you are doing well today!

    Would you be able to grant us support access so we can take a closer look?

    You can grant support access via admin dashboard - WPMU DEV > Support
    https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Please post here a slug so I would know where to look?

    Could you please post here or attach a file with the custom code you created so I could test it?

    Please advise,

    Cheers,
    Nastia

  • Richard

    Hi, Nastia!

    I've granted you support access. The issues is on the home page test.cornerstonepath.com/blog in the orange "Services" section (second section down).

    Here's the HTML:<b><div id="accordion">

    <b><div id="accordion">
      <ul>
        <li>
          <a href="#one">Partner Search</a>
          <div id="one" class="accordion">
    Focus on what matters, selecting your ‘right’ partner from a short list. Go much faster customizing templated RFIs for your special needs and we’ll interview / screen the long list of suspects to a short list for your detailed interview. We can do this fast because we know this space and we’ve learned to see through the marketing pitch and the smooth sales rep to recognize the good, the bad, and the ugly that all partners have.      </div>
        </li>
      </ul>
    </div></b>

    And here's the CSS:

    body{
    background:#FFF;
    }
    
    /*  Basic stucture
    =====================*/
    #accordion{margin:0px auto;width:400px;}
    #accordion ul{list-style:none;margin:0;padding:0;}
    .accordion{display:none;}
    .accordion:target{display:block;}
    #accordion ul li a{text-align:center;text-decoration:none;display:block;padding:10px;font-size:200%;font-weight:bold;}
    .accordion{padding:4px;}
    
    /*  Colors
    ====================*/
    
    #accordion ul li a{
    background:#f7b334;
    border-bottom:0px solid #ffffff;
    color:#FFF;
    }
    .accordion{
    background:#f7b334;
    color:#fff;
    }
    .accordion:target{
    border-top:3px solid #FFFFFF;
    }
  • Nastia

    Hello Richard, I hope you are doing well today!

    Yes, I can confirm that the code is not working with code element. But I've found a workaround:
    - Add new Widget Element
    - Go to Widget Settings and select the Text widget put the following code inside the content:

    <b><div id=&quot;accordion&quot;>
      <ul>
        <li>
          <a href=&quot;#one&quot;>Partner Search</a>
          <div id=&quot;one&quot; class=&quot;accordion&quot;>
    Focus on what matters, selecting your ‘right’ partner from a short list. Go much faster customizing templated RFIs for your special needs and we’ll interview / screen the long list of suspects to a short list for your detailed interview. We can do this fast because we know this space and we’ve learned to see through the marketing pitch and the smooth sales rep to recognize the good, the bad, and the ugly that all partners have.      </div>
        </li>
      </ul>
    </div></b>

    - Go to Appearance and create a new preset
    - Once you create it, click on Edit Preset CSS and add the CSS code you are using inside the CSS editor.

    I've tested it on my installation and this solution should work.

    Let us know if you require any further assistance!

    Cheers,
    Nastia

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.