Jump to content

SJAdesigns

Circle Member
  • Posts

    5
  • Joined

  • Last visited

Posts posted by SJAdesigns

  1. Site URL: https://www.urbanvoguedayspa.com.au/trial

    Hi guys, I'm having issues making my accordion background color change when open, currently it's the opposite of what I want, the colour of the heading changes when clicked, I want the contents of the accordion to change color when clicked. I think I would need to change the script which I don't really know how to do, can someone help?  Picture is an example of what I want it to look like

     

    image.thumb.png.3f14fa14356ab92f7a21e9f8fa5bf9cb.png

     

    Here's the script: 

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script>
    $(document).ready(function(){
    $('.markdown-block .sqs-block-content h3').addClass('ui-closed').css('cursor','pointer');
    $(".markdown-block .sqs-block-content h3").nextUntil("h3").slideToggle();
    $(".markdown-block .sqs-block-content h3").click(function() {

    $(this).nextUntil("h3").slideToggle();
    $(this).toggleClass('ui-closed ui-open');
    });
    });
    </script>

    Here's the css: 

     

    //markdown block for treatments

    .markdown-block p {
      margin-left:1.5em;
      padding-right: 16px;
    }
      .markdown-block h3 {
    font-weight: 300 !important;

    }
    .markdown-block .ui-closed:before {
      content:"+ ";
    }

    .markdown-block .ui-open:before {
      content:"- ";
    }
      
      .markdown-block {padding:20px;
      margin: 0 auto;
      width: 100% !important;
     }
      
    .ui-open {
     background-color: #d2c8c2 !important;}

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.