CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sowmya
Sowmya

Reputation: 26969

accordion script confliction

Here is the DEMO of accordion. It is working fine in fiddle but it is noot working when I copy the code in html file.

Here is the HTML file code

Edited HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="horizontalaccordion.css" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></script>
</head>

<body>


<div class="horizontalaccordion">
<ul>
    <li>
        <h3>Heading 1</h3>
        <div>Content For Panel 1.</div>
    </li>
    <li>
        <h3>Heading 2</h3>
        <div>Content For Panel 2.</div>
    </li>
    <li>
        <h3>Heading 3</h3>
        <div>Content For Panel 3.</div>
    </li>
    <li>
        <h3>Heading 4</h3>
        <div>Content For Panel 4</div>
    </li>
</ul>
</div>​ 
<script type="text/javascript">
    $(document).ready(function() {
 $('h3','.horizontalaccordion ul li').on('click',function() {
    $(this).closest('li').toggleClass('hover').siblings().removeClass('hover');
});​
});
</script>


</body>
</html>

Upvotes: 0

Views: 193

Answers (2)

Navin
Navin

Reputation: 534

Might be your CSS file is not loaded properly, make sure your .css file is near your .htm file , if that doesn't try downloading the .js file and change the src to where it got downloaded. Other than that i don't see any problem

Upvotes: 0

Danil Speransky
Danil Speransky

Reputation: 30453

It works if you delete some special charecters form some lines. Open you html file in some real text editor like vim and you will see. I see in vim something like <200b> symbols, if I delete them, then it works fine.

Just copy this:

<!DOCTYPE html>

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link rel="stylesheet" href="horizontalaccordion.css"
    type="text/css" />
    <script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></script>
  </head>

  <body>
    <div class="horizontalaccordion">
      <ul>
        <li>
          <h3>Heading 1</h3>
          <div>Content For Panel 1.</div>
        </li>
        <li>
          <h3>Heading 2</h3>
          <div>Content For Panel 2.</div>
        </li>
        <li>
          <h3>Heading 3</h3>
          <div>Content For Panel 3.</div>
        </li>
        <li>
          <h3>Heading 4</h3>
          <div>Content For Panel 4</div>
        </li>
      </ul>
    </div>

    <script type="text/javascript">
      $(document).ready(function () {
        $('h3', '.horizontalaccordion ul li').on('click', function () {
          $(this).closest('li').toggleClass('hover').siblings().removeClass('hover');
        });
      });
    </script>
  </body>
</html>

Upvotes: 1

Related Questions