Add space between accordion panes on webforms asp.net application

Question

Tech: Asp.net Webforms application with a master page, using ajax accordion control. All elements for the page is within a placeholder.

I have a webpage that have an ajax accordion with multiple AccordionPane elements within and looks like this:

The html code :

Problem: I need a way to increase the space between specific elements. In this example the space between Section 6 and 7 must increase.

If I use the developer tools and add margin-top:20px manually I get the desired result but I am stumped as to how to do it in html/jquery.

I have tried css and even adding attributes in code behind but the attribute is never shown. The issue I believe is the structure of the elements that all have the same ID aka "MainContent" which is the page content holder.

Here is the initial css that creates the look and feel.

Margin-top in the css only applies to the Section text margins. Anyone have an idea on what to do?

Answer 1

I think I solved it by targeting the parent 'div' of the 'Header' element of each Accordion.

  $(document).ready(function () {
        Setupspaces();

        $(".accordionHeaderScreening").click(function () {
            Setupspaces();
        });
        $(".accordionHeaderSelected").click(function () {
           Setupspaces();
       });

        function Setupspaces()
        {
            var dv = $("#<% =Label7.ClientID %>").closest("div").parent();
            dv.addClass("spaceaccordion");

            var dv8 = $("#<% =Label8.ClientID %>").closest("div").parent();
            dv8.addClass("spaceaccordion");

            var dv9 = $("#<% =Label9.ClientID %>").closest("div").parent();
            dv9.addClass("spaceaccordion");

            var dv10 = $("#<% =Label10.ClientID %>").closest("div").parent();
            dv10.addClass("spaceaccordion");

        }
       
    });

            .spaceaccordion
        {
            margin-top:20px;
        }