An accordion jQuery UI example with icons in header

jQuery, CSS and HTML

<!doctype html>
<html>
<head>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

  <script>
  $(function() {
    var icons = {
      header: "PanelClosedicon",
      activeHeader: "PanelOpenicon"
    };
    $( "#jQuery_accordion" ).accordion({
      icons: icons
      
    });
  });
  </script>
<style>
.ui-accordion .ui-accordion-header {
	display: block;
	cursor: pointer;
	position: relative;
	margin: 5px 0 0 0;
	padding: .5em .5em .5em .7em;
	min-height: 0; /* support: IE7 */
	font-size: 100%;
    background:#FDF8E4;
    color:#846733;
    border:1px solid #846733;
    border-radius: 7px;
}
.ui-accordion .ui-accordion-icons {
	padding-left: 2.2em;
}

.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
	position: absolute;
	left: .5em;
	top: 50%;
	margin-top: -8px;
}

.ui-icon.PanelOpenicon {
    padding-left: 2em;
    background:url('jquery.jpg') no-repeat;
    background-size:15px;
    width:20px;
    height:20px;
}
.ui-icon.PanelClosedicon {
    padding-left: 2em;
    background:url('jquery.jpg') no-repeat -5px;
    background-size:30px;
    width:20px;
    height:20px;
}

.ui-accordion .ui-accordion-content {
	padding: 1em 2.2em;
	border-top: 0;
	overflow: auto;
    background:#FFFF84;
}
</style>
</head>
<body>
 
<div id="jQuery_accordion">
  <h3>header 1</h3>
    <div>
    <p>
    Panel 1 content - Icon example.
    </p>
    </div>
  <h3>header 2</h3>
    <div>
    <p>
    Panel 2 content - Icon example.
    </p>
    </div>
  <h3>header 3</h3>
    <div>
    <p>
    Panel 3 content - Icon example.
    </p>
    </div>
</div>
 
 
</body>
</html>

header 1

Panel 1 content - Icon example.

header 2

Panel 2 content - Icon example.

header 3

Panel 3 content - Icon example.