Translate Css to jQuery

Question

I am trying to make a collapsible div/panel/rows. I want to add arrow icon (right and down arrow) using jquery/javascript. Do you have idea on how to translate my CSS code on jQuery?

Here's my jQuery code:

$(document).ready(function(){
    $(".collapse").on("hide.bs.collapse", function(){
        $(".arrows").after().css({"content":"\e080","font-family": "Glyphicons Halflings"});
    });
    $(".collapse").on("show.bs.collapse", function(){
        $(".arrows").after().css({"content":"\e114","font-family": "Glyphicons Halflings"});
    });
});

Here's my css code:

.arrows:after {
    font-family: "Glyphicons Halflings";
    content: "\e114";
}

.arrows.collapsed:after {
    font-family: "Glyphicons Halflings";
    content: "\e080";
}

Here's my HTML code:

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse1">Collapsible panel <span class="arrows"></span></a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <div class="panel-body">Panel Body</div>
      <div class="panel-footer">Panel Footer</div>
    </div>
  </div>
</div>

Just add/remove the class, instead of applying CSS through JS — Tushar, Mar 16 '16 at 04:05
I want to change the content of my span (.arrows) using jquery/javascript. — darkvirus24, Mar 16 '16 at 04:09
Possible duplicate of http://stackoverflow.com/questions/4481485/changing-css-pseudo-element-styles-via-javascript — Arun P Johny, Mar 16 '16 at 04:11

score 0 · Accepted Answer · answered Mar 16 '16 at 04:13

check this snipped.just toggle the class on hide and show events

$(".collapse").on("hide.bs.collapse", function() {
  $(this).parent().find('.arrows').addClass('collapsed');
});
$(".collapse").on("show.bs.collapse", function() {
  $(this).parent().find('.arrows').removeClass('collapsed');
});

.arrows:after {
  font-family: "Glyphicons Halflings";
  content: "\e114";
}
.arrows.collapsed:after {
  font-family: "Glyphicons Halflings";
  content: "\e080";
}

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <div class="panel-group">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse1">Collapsible panel <span class="arrows collapsed"></span></a>
      </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse">
        <div class="panel-body">Panel Body</div>
        <div class="panel-footer">Panel Footer</div>
      </div>
    </div>
  </div>
</body>

</html>

Translate Css to jQuery

1 Answers1