Jquery expand

[wragen22]

Hi everyone,
I had some jquery working on my page which was working fine with a simple 1 column layout. Now that I’ve added some grid classes and modules I am not quite getting it. The functionality is supposed to hide all text below the title as well as the right-column. Upon clicking, the background should change for the whole section, text should change to white and drop down in a slide-toggle function.

http://codepen.io/wragen22/pen/msCwk

Thanks.

[wragen22]

still having some trouble here…. this codepen might help you understand more what I’m trying to do.

[http://codepen.io/reid/pen/spril](http://codepen.io/reid/pen/spril “http://codepen.io/reid/pen/spril”)

[chrisburton]

First off, I just wanted to make it aware that I’m not that experienced in jQuery.

But I noticed something weird. When toggling the second h1, it doesn’t transition like the first. Not sure if this is a jQuery or CSS issue.

I also noticed that you’re hiding some classes but I don’t seem them being shown on the click function which leads me to believe that might be part of the problem. This is because when I comment out the first line, it almost does what it should.

$(‘article p, article .buy-btns’).hide();
$(‘article h1’).addClass(‘pointer’).click(function() {
var $article = $(this).closest(“.grid”),
$siblings = $(this).closest(“.grid”).find(“div.background:first”)
if ($article.hasClass(‘expanded’)) {
$siblings.slideToggle(‘slow’).promise().done(function() {
$article.removeClass(‘expanded’);
});
} else {
$article.addClass(‘expanded’);
$siblings.slideToggle(‘slow’);
}
});

Pen: http://codepen.io/chrisburton/pen/qJurK

[wragen22]

anybody?

[wragen22]

:-/

[chrisburton]

@Mottie Mind helping out on this one?

[Mottie]

Sure @chrisburton! Oh and the reason why the second article wasn’t working was because there wasn’t a `

` wrapping the content.

Well @wragen22… the HTML markup is really really bad. I’m not sure why you have an `

` wrapping the entire thing, but you’re not really supposed to put divs immediately inside of it. If you’re trying to keep the numbering system, then that’s fine, but use `
1. `’s!

   Once I cleaned up the HTML, I ended up with [this demo](http://codepen.io/Mottie/pen/BLzpf) and this basic HTML:

   1. Title #

      Text.

      Text.

   And this jQuery:

   $(function(){

   $(‘.grid h1’).addClass(‘pointer’).click(function() {
   var $article = $(this).closest(“.grid”),
   $siblings = $article.find(“p,.right-module”)
   if ($article.hasClass(‘expanded’)) {
   $siblings.slideToggle(‘slow’, function() {
   $article.removeClass(‘expanded’);
   });
   } else {
   $article.addClass(‘expanded’);
   $siblings.slideToggle(‘slow’);
   }
   });

   });

   I know the `right-module` doesn’t line up with the top of the Title like the original, but that’s just some css tweaking ;P

[chrisburton]

@Mottie I could be wrong but I think he’s actually trying to get the opposite effect. The title should only be displaying, but upon clicking it, all that content should fade-in. Is that right @wragen22?

Thanks for taking a look at this. I was completely stumped on the jQuery.

[Mottie]

@chrisburton Not a problem! :P

Yeah I wasn’t sure why the `.promise()` was needed, I don’t use it much except for ajaxy stuff. The `slideToggle()` allows adding a callback function within it ([ref](http://api.jquery.com/slideToggle/)) – `$(‘.selector’).slideToggle( [duration ] [, complete ] );`

[wragen22]

@Mottie thank you for the help. I’ve got a learning jquery book on the way! ;-) But yes @chrisburton is right. I am trying to do the opposite where what is only seen is the titles with their numbers (white background). Upon clicking the information slides toggles down and the background changes to the red. That is why I had the previous line of “$(‘article p, article .buy-btns’).hide();”

I noticed one more thing that has had me stumped. The background red does not expand the whole 100% width of the page. Leaving the number out…

[Mottie]

@wragen22 Ah, ok. I did miss the `hide()` at the beginning, so that’s why the toggle was off. I changed it to `slideDown` and `slideUp` to make it more concise. I also ended up changing around the css a tiny bit. The number was there, it was just white. And the buy button span was the same color as the background. Anyway, [try it now](http://codepen.io/Mottie/pen/BLzpf)!

$(function(){

$(‘.grid p, .grid .right-module’).hide();
$(‘.grid h1’).addClass(‘pointer’).click(function() {
var $article = $(this).closest(“.grid”),
$siblings = $article.find(“p,.right-module”)
if (!$article.hasClass(‘expanded’)) {
$siblings.slideDown(‘slow’, function() {
$article.addClass(‘expanded’);
});
} else {
$article.removeClass(‘expanded’);
$siblings.slideUp(‘slow’);
}
});

});

[wragen22]

@Mottie Ah! That’s great! Only thing, is I was was trying to get the whole 100% width of the page to turn red, including the number. And turn red first then drop down. That was the line here that I was going for ” $siblings.slideToggle(‘slow’).promise().done(function() {
$article.removeClass(‘expanded’);” But also another reason why I think my markup was so weird was that I was trying to get the first two links in the right module to be placed up middle way of the h1… Would you recommend a better way to do that?

here is an older codepen that will better show you what i’m looking for.

http://codepen.io/wragen22/full/sqrlD

[wragen22]

@Mottie I’ve added back in the .promise().done so you can see what i’m going for. I’m still having issues getting the background color to expand the whole 100% width of the page..hence my weird markup before. Because of this..I think I may not be able to use the ordered list, epsecially if I want to do some formatting and margins of the numbering and titles. I also added a fadeToggle on the right buttons..but just not sure how to tie it in with the left paragraph. http://codepen.io/wragen22/pen/Fjesr

$(function(){

$(‘.grid p, .grid .right-module’).hide();
$(‘.grid h1’).addClass(‘pointer’).click(function() {
var $article = $(this).closest(“.grid”),
$siblings = $article.find(“p,.right-module”)
if ($article.hasClass(‘expanded’)) {
$siblings.slideToggle(‘slow’).promise().done(function() {
$article.removeClass(‘expanded’);
});
} else {
$article.addClass(‘expanded’);
$siblings.slideToggle(‘slow’);
}
});

});

[Mottie]

The HTML markup is a mess again. There is really no reason to use `promise().done()` when the `slideToggle` function has a built-in callback function.

The reason the shaded region doesn’t fill 100% of the page width is because of the `ol` margin.

Maybe a better idea would be to use css3’s [counter-increments](https://css-tricks.com/almanac/properties/c/counter-increment/) instead of an `ol`

[wragen22]

@Mottie thank you. Can you show me how to ensure that the text slides back up before the red color fades out? I haven’t been able to come up with a solution besides the promise done.

[Author]

Posts