JQuery와 아코디언 이미지

Question

내가 ... 내 아코디언에 내가 여기이 결합 된 이미지 에 대한 CSS를 작성하는 방법을 잘 모릅니다 을 화살표 아이콘을 포함하도록 노력하고

내 이미지가 여기 http://code.jquery.com/ui/1.9.1/themes/base/images/ui-icons_454545_256x240.png

링크 내 JS 코드

입니다

http://jsfiddle.net/Uf7Nj/3/

/*! 
* Vallenato 1.0 
* A Simple JQuery Accordion 
* 
* Designed by Switchroyale 
* 
* Use Vallenato for whatever you want, enjoy! 
*/ 

$(document).ready(function() 
{ 
    //Add Inactive Class To All Accordion Headers 
    $('.accordion-header').toggleClass('inactive-header'); 

    //Set The Accordion Content Width 
    var contentwidth = $('.accordion-header').width(); 
    $('.accordion-content').css({'width' : contentwidth }); 



    // The Accordion Effect 
    $('.accordion-header').click(function() { 
     if($(this).is('.inactive-header')) { 
      $('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content'); 
      $(this).toggleClass('active-header').toggleClass('inactive-header'); 
      $(this).next().slideToggle().toggleClass('open-content'); 
     } 

     else { 
      $(this).toggleClass('active-header').toggleClass('inactive-header'); 
      $(this).next().slideToggle().toggleClass('open-content'); 
     } 
    }); 

    return false; 
}); 

Answer 1

단지에서 필요한 아이콘 위치를 추출 jquery-ui css :

이

CSS : 아이콘의 이름이 아이콘의 이름을 찾아, 당신이 필요로하는 아이콘, 열린 CSS 파일에 theme rolling page 호버로 이동 얻을

.ui-icon { 
    width: 16px; 
    height: 16px; 
    background-image: url("http://code.jquery.com/ui/1.9.1/themes/base/images/ui-icons_454545_256x240.png"); 
} 
       

         
.ui-icon-arrowthick-1-n { background-position: 0 -48px; } 
.ui-icon-arrowthick-1-ne { background-position: -16px -48px; } 
.ui-icon-arrowthick-1-e { background-position: -32px -48px; } 
.ui-icon-arrowthick-1-se { background-position: -48px -48px; } 
.ui-icon-arrowthick-1-s { background-position: -64px -48px; } 
.ui-icon-arrowthick-1-sw { background-position: -80px -48px; } 
.ui-icon-arrowthick-1-w { background-position: -96px -48px; } 
.ui-icon-arrowthick-1-nw { background-position: -112px -48px; } 
.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; } 
.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; } 
.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; } 
.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; } 

sample

에 코드를 복사 당신의 새로운 CSS.