javascript - jQuery .click() not firing as expecting -
what i'm trying achieve is:
- user click h4 inside of .question div
- .question div expanded 90px, , it's child paragraph slides view having margin-top set 0
- when user clicks h4 element second time, .question div should return 35px height , paragraph should have margin-top set 35px.
jquery(document).ready(function($) { $('.question h4').click(function () { $(this).parents('.question').css('height', '90'); $(this).siblings('p').css('margin-top', '0'); $(this).parent().addclass('open'); }); $('.question.open h4').click(function () { $(this).parent.removeclass('open'); $(this).parents('.question').css('height', '65px'); $(this).siblings('p').css('margin-top', '35px'); }); });
you need 1 handler:
$('.question h4').click(function () { if ($(this).is('.open h4')) { $(this).parent.removeclass('open'); $(this).parents('.question').css('height', '65px'); $(this).siblings('p').css('margin-top', '35px'); } else { $(this).parents('.question').css('height', '90'); $(this).siblings('p').css('margin-top', '0'); $(this).parent().addclass('open'); } }); your second handler assignment nothing because none of <h4> elements start off "open" class (or, @ least, suspect don't).
Comments
Post a Comment