CODEWITHSUNDEEP
jqueryhtmlcsshovertoggle
Jon
Jon

Reputation: 103

CSS Accordion - Used jquery to make "hover" a toggle, the JS is correct, but doesn't work in my HTML

This was previously a pure CSS accordion, however I decided that I'd like to add a toggle ability to the slides to make it easier for users, instead of having them close whenever they mouse-out of the area. Thanks to help in my previous post:

CSS Accordion -> Adding jquery to change "hover" to a toggle but the JS doesn't register?

I have a working "hover-toggle", which works correctly in the JSFiddle:

http://jsfiddle.net/7Q8ea/5/

The problem I'm having now, is that when I take the code outside of the JSfiddle and place it into my HTML, it just doesn't work. I checked on the fiddle, by changing it from "Onload" to "No wrap - In body>" and it recreates the problem that I'm having.

I went looking for a solution and found mention of using this code, to wrap the JS in the head. However either my syntax is incorrect, or it just doesn't work either:

$(document).ready(function() {//put your script here...});

My current HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Pure CSS accordion</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body id="home">
   <ul class="accordion" id="vertical">
      <li class="slide-01">
        <div>
          <h2>Title goes Here</h2>
          <br />
          <img src="http://i.imgur.com/ezY207l.gif" height="125" width="180" />            <taxt>Text here</taxt>
        </div>
      </li>
   </ul>
   <script src="jquery.js"></script>
   <script $('h3, ul.accordion  li').on('click',function() {
        console.log('hi'); 
        $(this).closest('li').toggleClass('hover').siblings().removeClass('hover');
     });
   </script>
</body>
</html>

If I place this in the head:

<script src="jquery.js"></script>

<script $(document).ready(function() {$('h3, ul.accordion  li').on('click',function()  $(this).closest('li').toggleClass('hover').siblings().removeClass('hover');
    });
</script>

Then the CSS doesn't load at all. My syntax is probably messy/wrong though. Any help appreciated getting this working. (Must be IE8 compatible as usual :( )

Upvotes: 1

Views: 504

Answers (2)

KevinT.
KevinT.

Reputation: 372

Missing the '>' in the second script tag.

Should be:

<script>
$(document).ready(function() 
    {$('h3, ul.accordion  li').on('click',function(){
        $(this).closest('li').toggleClass('hover').siblings().removeClass('hover');
    }
});
</script>

Upvotes: 1

Maen
Maen

Reputation: 10698

You forgot to close your second opening script tag :

<script src="jquery.js"></script>

<script> 
$(document).ready(function() {
    $('h3, ul.accordion  li').on('click',function() {
       console.log('hi'); $(this).closest('li').toggleClass('hover').siblings().removeClass('hover');
    });
});
</script>

Upvotes: 3

Related Questions