How to convert a CSS and a javascript to a class

Question

I have some problems converting the CSS id to a class and the javascript to match it. I need to use the script multiple times on the site

Here my code: CSS:

#first {
    background-color: #FFF;
    width: auto;
    height: auto;
    overflow: hidden;
    padding: 10px;
}

JavaScript:

var divh = document.getElementById('first').offsetHeight;

//keep default height
var divh = $("#first").outerHeight();

document.getElementById("first").style.height = "100px";

//toggle functions
$('div:first').toggle(
  function () {
     $("#first").stop().animate({
        height: divh +'px'
     }, 1000);
  },
  function () {
    $("#first").stop().animate({
      height: '100px'
    }, 1000);
  }
)

What do you want it to do, and what is the (presumably wrong) result you're getting? — Rian Schmits
– Rian Schmits, Commented Feb 17, 2011 at 11:17

marktucks · Accepted Answer · 2011-02-17 11:25:47Z

1

If I understand correctly you can just do:

.first {
    background-color: #FFF;
    width: auto;
    height: auto;
    overflow: hidden;
    padding: 10px;
}

And the Javascript would be something like this:

var divh = $('.first').offsetHeight;

//keep default height
var divh = $(".first").outerHeight();

$('.first').style.height = "100px";

//toggle functions
$('div:first').toggle(
  function () {
     $(".first").stop().animate({
        height: divh +'px'
     }, 1000);
  },
  function () {
    $(".first").stop().animate({
      height: '100px'
    }, 1000);
  }
)

Just uses the jQuery selector to select the class instead of the ID.

edited Feb 17, 2011 at 11:25

answered Feb 17, 2011 at 11:17

marktucks

1,7711 gold badge16 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

marktucks Over a year ago

What exactly "doesn't work"? Have you tried running in Firefox using Firebug, it will show you any Javascript errors.

Daniel Over a year ago

The slide does not animate anymore.

Don · Accepted Answer · 2011-02-17 13:12:12Z

1

I think you can use a "class selector" to get all the elements belonging to that class and then apply animation to all of them or one by one by using the each function (see here). Something like:

CSS

.first {
background-color: #FFF;
width: auto;
height: auto;
overflow: hidden;
padding: 10px;
}

JavaScript:

$('.first').each(function () {
    var divh = $(this).outerHeight();
    ecc. ecc.
})

edited Feb 17, 2011 at 13:12

answered Feb 17, 2011 at 11:19

Don

17.7k13 gold badges67 silver badges106 bronze badges

1 Comment

marktucks Over a year ago

If you call the toggle() function (or any other function for that matter) using the class selector it will be applied to all elements matching that class.

Gowri · Accepted Answer · 2011-02-17 11:21:38Z

0

use .first instant of #first

answered Feb 17, 2011 at 11:21

Gowri

16.9k27 gold badges103 silver badges162 bronze badges

Comments

João Neves · Accepted Answer · 2011-02-17 11:25:45Z

0

Mark's answer is almost entirely correct.

Although, he changed $('div:first') to $('div.first') which are not the same thing.

:first is part of jQuery selectors to select only the first matched element (see here).

So, if you want to pick the first div, use $('div:first'). If you want to select all divs with the "first" class, use $('div.first').

answered Feb 17, 2011 at 11:25

João Neves

9671 gold badge6 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to convert a CSS and a javascript to a class

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related