CODEWITHSUNDEEP
jquery-ui-accordion
Sankar Chinnakotla
Sankar Chinnakotla

Reputation: 68

How to change color of accordion header ui-icon when accordion is active

I have built the below sample page. I wanted the background color of the ui-accordion header to change when active. I wanted the accordion ui header icon to the the same color whether the header is active or not. But when rendered on the browser, the icon has a background color of black only when header is not active. When the header is clicked, it changed color to white.

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
  <link href="https://ssl.gstatic.com/docs/script/css/add-ons.css" rel="stylesheet" />
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
  <style id="mainStyles">
    
    .ui-accordion-header.ui-state-active { 
      background-color: hsl(256, 92%, 95%); 
      color:black;
      border-style:none;
    }

 

    .ui-accordion-header.ui-icon {
            color:black;
    }


    .ui-accordion {
      border-color: #baa2fb;
    }   
    </style>
</head>
<body>
          <div id="create-pagination-accordion">
            <div id="create-pagination-header" class="create-form-row">
              <span>Pagination</span>
            </div>
            <div id="create-pagination-block">
              <div class="create-form-row">
                  <select id="create-input-pagination" style="padding: 3px 2px;">
                  <option value="none" selected>None</option>
                  <option value="cursor">Cursor</option>
                  <option value="next-page">Next Page</option>
                  <option value="offset-limit">Offset Limit</option>
                </select>
              </div>     
             </div>
        </div>
        <script>
            $(document).ready(function () {
              $( "#create-pagination-accordion" ).accordion({
                animate: 500,
                collapsible:true,
                heightStyle: "content",
                 header:"#create-pagination-header",
                 active: false
              });
        });           
        </script>
<body>
</html>

Upvotes: 1

Views: 243

Answers (0)

Related Questions