Expandable/Collapsable not working - CSS-Tricks

This topic is empty.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
November 10, 2013 at 9:14 pm #155659

fobsternd
Participant

I got the foundational coding from another guyon JSFiddle who was trying to accomplish the same thing but with a lot of other embellishments. I simplified the coding and this is what I want on my website. A div that can expand and collapse upon clicking. It’s working like intended on JSFiddle but when I put the codes in Dreamweaver and preview on browsers, it doesn’t work! Am I placing the codes at the wrong spots?

I tried placing the JS inside the body, inside the head, right before the closing body tag and all don’t work. I also made sure to wrap the JS in script tags but that doesn’t work either.

November 11, 2013 at 10:45 am #155698

Joel Cummings
Participant

Do you have jQuery imported? If so make sure that your code is below the jQuery script. You can use Chrome’s developers tools to view errors in the JavaScript Console, take a look in there to see if you can figure out what’s wrong.

November 11, 2013 at 3:47 pm #155732
fobsternd
Participant
So here is what I did, I used the CDN for the library and included this in my script tags, here is my actual code:

$(‘.profile’).hover(function() { $(this).parent().toggleClass(‘hover’); });
$(‘.profile’).click(function() {
if ($(this).height() > 150) {
$(this).animate({height: ‘120px’});
} else {
$(this).animate({height: ‘400px’});
}
```
});
```
Now this is technically supposed to work right? I put it in Dreamweaver and previewed the page on a browser but still not working :(
November 11, 2013 at 8:50 pm #155790
Joel Cummings
Participant
So your code should look something like:
```
    <html>
          <head></head>
          <body>content here</body>
          <script src="linktoJquery"></script>
          <script>[Your JQuery here]</script>
         </html>
```
If you are using Google Chrome you can go under view->Developer->JavaScript Console to view any errors that are showing up, which might help you, it will also tell you if jQuery or $ is not defined if you see that it means it can’t find your jQuery library
November 12, 2013 at 10:45 am #155828

fobsternd
Participant

Ah yes it works now! So it has to be in between and . However there is 1 minor detail I want to fix. For some reason, the transition speed is slower than it is on JFiddle. I want the div to expand and collapse almost instantly upon a click. Can you help me?

Edit: for some reason, the transition speed is back to “normal” now. They’re moving almost instantly!
Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

The forum ‘JavaScript’ is closed to new topics and replies.