Border Accordion Bar in Different Browsers

Question

Border Accordion Bar in Different Browsers

I have the following jQuery Accordion in which I want to open several sections:

$(document).ready(function() {
  $(".accordion").accordion({
    collapsible: true,
    active: false,
    animate: 500,
  }).on("click", "div", function(e) {
    $("div.ui-accordion-header").each(function(i, el) {
      if ($(this).is(".ui-state-active")) {
        $(this).find(".panel-icon").html("-")
      } else {
        $(this).find(".panel-icon").html("+")
      }
    })
  });

});

.accordion {
  float: left;
  line-height: 2.0;
  width: 100%;
}
.js_button {
  width: 99%;
  padding-left: 1%;
  font-weight: bold;
  border-style: solid;
  border-left-width: 1px;
  border-right-width: 1px;
  border-top-width: 1px;
  border-bottom-width: 1px;
  margin-top: 1%;
  outline-width: 0;
}
.panel {
  width: 99%;
  height: 20%;
  padding-left: 1%;
  font-weight: bold;
  border-style: solid;
  border-left-width: 1px;
  border-right-width: 1px;
  border-top-width: 0px;
  border-bottom-width: 1px;
}

<html>

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

</head>

<body class="body">


  <div class="accordion">
    <div class="js_button"><span class="panel-icon">+</span>Part1</div>
    <span class="panel">
        					<p>Content1</p>
        					</span>
  </div>

  <div class="accordion">
    <div class="js_button"><span class="panel-icon">+</span>Part2</div>
    <span class="panel">
        					<p>Content2</p>
        					</span>
  </div>
</body>

</html>

Run code Hide result

The Accordion itself works fine, but when I use Chrome , Safari or Opera , I have the following problem with the bottom border of the panel (content):

When I click on the "button" and the panel opens, the bottom border does not exist. At the end of the slide animation, a burgundy shot finally emerges. How can I avoid this and let the border bottom be there from the very beginning of the animation, like in Firefox and IE?

Thanks for any help :-)

+4

jquery html css

Michi Jul 18 '15 at 8:58

source share

1 answer

wickywills · Accepted Answer · 2015-07-18T09:13:39+0000

.accordion div :

JSFiddle

.accordion {
    float: left;
    line-height: 2.0;
    width: 100%;
    border-style: solid;
    border-left-width: 1px;
    border-right-width: 1px;
    border-top-width: 1px;
    border-bottom-width: 1px;
     margin-top: 1%;
}
.js_button {
    width: 99%;
    padding-left: 1%;
    font-weight: bold;
    outline-width: 0;
    position: relative;
}
.js_button:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: #000;
}
.panel {
    width: 99%;
    height: 20%;
    padding-left: 1%;
    font-weight: bold;
    overflow: hidden;
}

, - , . div ( display:block), , .

, :after . border-bottom , . , , , :)

Border Accordion Bar in Different Browsers

More articles: