Jquery Collapsible панель - изменить цвет шрифта

Когда я нажму на свернутую панель, вы увидите, что цвет вкладки меняется с желтого на темно-зеленый, я хочу иметь возможность изменить цвет шрифта с красного на белый, я думал, что это будет так же легко, как и изменить на заднем плане, но после того, как попробовал все виды, я просто понятия не имею, кто-нибудь может помочь?

http://jsfiddle.net/dkftp4gh/

$(document).ready(function() {
  // hide all div containers
  $('#collapsible-panels div').hide();
  // append click event to the a element
  $('#collapsible-panels a').click(function(e) {
    // slide down the corresponding div if hidden, or slide up if shown
    $(this).parent().next('#collapsible-panels div').slideToggle('slow');
    // set the current item as active
    $(this).parent().toggleClass('active');
    e.preventDefault();
  });
});
body {
  margin: 0px;
  padding: 0px;
}
#collapsible-panels {
  margin: 0px;
  padding: 0px;
  margin-top: 25px;
  -moz-box-shadow: 2px 2px 5px #333;
  -webkit-box-shadow: 2px 2px 5px #999;
  color: rgba(102, 102, 102, 1);
}
#collapsible-panels h2 {
  background: url(../../Worldwise%20Entertainment/open.png) no-repeat left center;
  background-color: #0EAF8A;
  width: 100%;
  height: 30px;
  margin: 0;
  padding-top: 10px;
  padding-right: 0px;
  padding-bottom: 10px;
  -webkit-border-radius: 20px 20px 0px 0px;
  font-family: 'Montserrat', sans-serif;
  font-size: 150%;
  line-height: 30px;
  padding-left: 8px;
  color: rgba(0, 102, 255, 1);
}
#collapsible-panels h2.active {
  background: url(../../Worldwise%20Entertainment/close.png) no-repeat left center;
  background-color: rgba(204, 255, 0, 1);
  color: rgba(0, 204, 51, 1);
}
#collapsible-panels h2 a {
  padding: 0 0 0 35px;
  text-decoration: none;
  color: rgba(255, 0, 0, 1);
}
#collapsible-panels div {
  width: 100%;
  background-color: rgba(255, 0, 204, 1);
  -webkit-border-radius: 0px 0px 20px 20px;
  font-family: 'Montserrat', sans-serif;
  font-size: 80%;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 8px;
  color: rgba(0, 204, 255, 1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="collapsible-panels">
  <h2 class="active"><a href="#">Disco and Karaoke</a>
     </h2>

  <div>
    <p>Content</p>
  </div>
</div>

Источник

3 ответа

Просто измените:

#collapsible-panels h2 a {
    padding: 0 0 0 35px;
    text-decoration: none;
    color: rgba(255,0,0,1);
}

с

#collapsible-panels h2 a {
    padding: 0 0 0 35px;
    text-decoration: none;
    color: #fff;
}
#collapsible-panels h2.active a {
    color: rgba(255,0,0,1);
}

Это все.

Источник

Просто добавьте немного CSS:

#collapsible-panels h2 a{
    color:#ffffff; /*white*/
}

#collapsible-panels h2.active a{
    color:#ff0000; /*red*/
}

Демо Фиддл

Источник

Вы можете добиться этого с помощью изменения ваших стилей или вы можете переключать классы, как показано ниже для заголовка, т.е. h2

$(document).ready(function() {

  // hide all div containers
  $('#collapsible-panels div').hide();
  // append click event to the a element
  $('#collapsible-panels a').click(function(e) {
    // slide down the corresponding div if hidden, or slide up if shown
    $(this).parent().next('#collapsible-panels div').slideToggle('slow');
    // set the current item as active
    $(this).parent().find('a').toggleClass('active1');
    $(this).parent().toggleClass('active');
    e.preventDefault();
  });
});
body {
  margin: 0px;
  padding: 0px;
}
#collapsible-panels {
  margin: 0px;
  padding: 0px;
  margin-top: 25px;
  -moz-box-shadow: 2px 2px 5px #333;
  -webkit-box-shadow: 2px 2px 5px #999;
  color: rgba(102, 102, 102, 1);
}
#collapsible-panels h2 {
  background: url(../../Worldwise%20Entertainment/open.png) no-repeat left center;
  background-color: #0EAF8A;
  width: 100%;
  height: 30px;
  margin: 0;
  padding-top: 10px;
  padding-right: 0px;
  padding-bottom: 10px;
  -webkit-border-radius: 20px 20px 0px 0px;
  font-family: 'Montserrat', sans-serif;
  font-size: 150%;
  line-height: 30px;
  padding-left: 8px;
  color: rgba(0, 102, 255, 1);
}
#collapsible-panels h2.active {
  background: url(../../Worldwise%20Entertainment/close.png) no-repeat left center;
  background-color: rgba(204, 255, 0, 1);
  color: rgba(0, 204, 51, 1);
}
#collapsible-panels h2 a {
  padding: 0 0 0 35px;
  text-decoration: none;
  color: rgba(255, 0, 0, 1);
}
#collapsible-panels div {
  width: 100%;
  background-color: rgba(255, 0, 204, 1);
  -webkit-border-radius: 0px 0px 20px 20px;
  font-family: 'Montserrat', sans-serif;
  font-size: 80%;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 8px;
  color: rgba(0, 204, 255, 1);
}
.active1 {
  color: black !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="collapsible-panels">
  <h2 class="active"><a href="#">Disco and Karaoke</a></h2>
  <div>
    <p>Worldwise Entertainment specialise in providing you with all your disco needs making sure that the entertainment is going to be remembered for all the right reasons! Worldwise Entertainment can provide a cost effective discos and or karaoke for every
      occasion ,We have extensive experience in supplying the best music to create the right mood for whatever your event might be.  Prices - 3 hours minimum standard prices Disco Karaoke Disco £65 £90 Karaoke £90 £65 These are the minimum prices for
      a tailored price please call us now
    </p>
  </div>
</div>

цвет шрифта заголовка изменится на черный, когда активен.

Источник
Другие вопросы по тегам