jquery accordion in different browsers

Michi Published at Dev

Michi

I have the following jQuery Accordion where I can have multiple sections open at the same time:

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>


        <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>

JQuery

$(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("+")
      }
    })
  });
});

CSS

.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%;
}

.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;
}

The Accordion works fine in Explorer and Firefox. However, in Chrome, Opera and Safari the border of the "js_button" gets highlighted once you click on it. Furthermore, when you want click on the last accordion (in this case "Part2") the animation of the content (in this case "Content2") is not working correctly because the border-lines are "drawn" slowly by the browser.

Do you have any idea how to solve this issue with the highlighting and the border animation?

Thanks a lot for any help :-)

Brian Luna

try to add .js_button { outline-width: 0; } to your css this will remove the highlight.

.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;
}

I have updated your code check here JSFiddle http://jsfiddle.net/ypv8yow1/

Collected from the Internet

Please contact [email protected] to delete if infringement.