Forums

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

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 <div class="background"> wrapping the content.

Well @wragen22... the HTML markup is really really bad. I'm not sure why you have an <ol> 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 <li>'s!

Once I cleaned up the HTML, I ended up with this demo and this basic HTML:

  <ol>
    <li class="grid">
      <h1>Title #</h1>
      <div class="grid-1-3">
        <div class="module">
          <p>Text.</p>
        </div>
      </div>
      <div class="grid-2-3">
        <div class="right-module">
          Text.
        </div>
      </div>
    </li>
    <!-- more li's here -->
  </ol>

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) - $('.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!

$(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 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.

wragen22

@Mottie thoughts?

Mottie

Oh sorry, it's really not that big a deal to use promise instead of the callback. Is it working now?

wragen22

Yes, it is working. But I guess I am still unsure as to why I couldn't get the desired functionality with the callback like you recommended.

Mottie

It's because there are multiple $siblings. When using the callback function, each individual sibling element will a callback on themselves to remove the class name after each animation has completed. Whereas, the promise().done() will remove the class names only after ALL of the sibling elements have completed their animation. It makes a difference because the css transition is applied to the class name being manipulated.

wragen22

@Mottie ah ok... Another question - I'm trying to get the expanded box to slide back up if another is clicked. Any idea?

chrisburton

@wragen22 .slideToggle()?

Mottie

Well I don't have your latest version of the demo, so I just modified mine... try this demo... basically I added the bit of code (seen below) that runs when expanding an article, it finds the siblings of .grid and slides them up.

      $article.siblings().find('p,.right-module')
          .slideUp('slow').promise().done(function() {
              $article.siblings().removeClass('expanded');
      });

@chrisburton I actually didn't use slideToggle(), I separated it into slideUp() and slideDown() really just to make the code easier to read, and to ensure they are sliding the right way (hiding non-current blocks).

Here is the full code (with comments):

$(function(){

  // close all articles
  $('.grid p, .grid .right-module').hide();
  // give the articles the finger! so we know they are clickable
  $('.grid h1').addClass('pointer').click(function() {
    // each article block has a class name of grid
    var $article  = $(this).closest(".grid"),
        // find the stuff to slide up/down inside the article
        $siblings = $article.find("p,.right-module");

    // if the article is expanded, then hide stuff
    if ($article.hasClass('expanded')) {
      // hide the stuff inside the article, and after ALL the animation
      // is done, add the expanded class (css background color transition)
      $siblings.slideUp('slow').promise().done(function() {
        $article.removeClass('expanded');
      });
    } else {
       // article isn't expanded, but it was clicked, so lets show it!
       // remember this class has a css transition, so the color fades in
       // while the content slides down
      $article.addClass('expanded');
      // slide open to reveal content
      $siblings.slideDown('slow');

      // find the other (non-current) article contents
      $article.siblings().find('p,.right-module')
        // slide that content up (hide it)
        // once all animation has completed, remove the expanded class
        // this is pretty much the same as above, except it's targeting
        // ALL of the other articles (siblings) on the page.
        .slideUp('slow').promise().done(function() {
        $article.siblings().removeClass('expanded');
      });
    }
  });

});

treehouse : what would you like to learn today?

Forums

Jquery expand