Изменение Аккордеона Bootstrap

Question

Я работаю над дизайном, в котором мне нужно accordian согласно прилагаемому изображению, я пробовал использовать jquery. В настоящее время взгляд на ссылку:

http://themekart.com/demo/spasalon/shortcode.html

Мы хотим изменить цвет текста и +/- на открытие или закрытие аккордеона?

Как мы можем это сделать, пожалуйста, помогите нам

Благодаря ...

Answer 1

Если вы хотите, чтобы некоторые JS, чтобы создать все это для вас,

проверка DEMO http://jsfiddle.net/yeyene/BhBHf/5/

JS

$(document).ready(function(){ 
    $('.accordion .accordion-toggle').each(function(){ 
     $(this).html('<span class="plus">+</span>'+$(this).text()); 
    }); 
    $('.accordion a').on('click',function(){ 
     var cur = $(this).children('.plus').text(); 
     // set all to default state 
     $('.accordion a').children('.plus').text('+'); 
     $('.accordion a').css({'color':'#666'}); 
     // then, change style of current one   
     if(cur=='+'){ 
      $(this).children('.plus').text('-'); 
      $(this).css({'color':'red'}); 
     } 
     else{ 
      $(this).children('.plus').text('+'); 
      $(this).css({'color':'#666'}); 
     } 
    }); 
}); 

CSS

.plus { 
    float:left; 
    width:20px; 
    height:20px; 
    text-align:center; 
    font-size:18px; 
    font-weight:bold; 
    border:1px solid #dfdfdf; 
    background:#fff; 
    margin:0 5px 0 0; 
    color:#666; 
} 

Answer 2

Это все CSS бизнес. Вы можете сделать .accordion-toggle красный и .accordion-toggle.collapsed серым. Что касается изображения, которое вы можете положить <img> тег перед или дайте ему запас и использовать CSS, чтобы поставить плюс/минус в (с использованием тех же критериев, что и выше.)

Css:.

.accordion-toggle{ 
    color:red; 
} 

.accordion-toggle.collapsed { 
    color:gray; 
} 

И для значка вы можете использовать значки бутстрапа twitter.

<i class="icon-minus"></i> 
<i class="icon-plus"></i> 

Answer 3

Вы можете изменить цвет те xt с использованием класса .accordion-toggle, строка 6082 из bootstrap.css. Я не предлагаю вам редактировать файл начальной загрузки. Вместо этого вы можете включить свой css (my-own-style.css) после Bootstrap (bootstrap.css), чтобы вы могли переопределить правила, переопределив их.

Если вы используете SASS, вы можете изменить переменные перед импортом bootstrap. Прочитайте это: http://twitter.github.com/bootstrap/customize.html#variables

О кнопок +/-, вы могли бы использовать что-то вроде этого, чтобы переключить класс кнопки: http://pastebin.com/y4RxdEgH

Где ваши классы кнопка будет иконка-шеврона и значок-chevron- вниз.