Time for action — adding some final touches

  1. Let's start with some simple CSS to add a small arrow icon to the left side of our questions. Head back into style.css and modify the styles a bit to add an arrow icon or an icon of your choosing. You can place the icon you choose inside your images folder:
    dt {
color: #268bd2;
font-weight: bold;
cursor: pointer;
margin: 0 0 1em 0;
padding: 0 0 0 20px;
background: url(../images/arrow.png) 0 0 no-repeat;
line-height: 16px;
}
dt:hover {
color: #2aa198;
background-position: 0 -32px;
}

    I'm using an image sprite for the arrows. As I'm changing the color of my questions from blue to green when the mouse hovers over the questions, I've included both the blue and green arrows in my sprite and am using a bit of CSS to show the green arrow when the text turns green. That means only one image has to download and there's no delay in downloading a new image to show when the mouse hovers over my question. If you're unfamiliar with the CSS image sprite technique, I recommend taking a look at Chris Coyier's article explaining it at http://css-tricks.com/css-sprites/.

  2. Now, we want to change the arrow to a different orientation when the question is opened. All we have to do is use a new CSS class for the open state of our questions and code the off and on states so the new arrow shape changes color as well. Again, I've included these arrow images in the same sprite, so the only thing I have to change is the background position:
    dt.open {
background-position: 0 -64px;
}
dt.open:hover {
background-position: 0 -96px;
}

    Note

    Just make sure to add these new classes after the other CSS we're using to style our<dt> tags. That will ensure that the CSS cascades the way we intended.

  3. So we have our CSS to show our questions are open, but how do we actually get to use it? We'll use jQuery to add the class to our question when it is opened, and to remove the class when it's closed.

    jQuery provides some nice methods for working with CSS classes. addClass() will add a class to a jQuery object and removeClass() will remove a class. However, we want to toggle our class just like we're toggling the show and hide of our questions. jQuery's got us covered for that too. We want the class to change when we click on the question, so we'll add a line of code inside our dynamicFaq function that we're calling each time a <dt> is clicked: 

    $('dt').bind('click', function(){
$(this).toggleClass('open'),
$(this).next().slideToggle();
});

    Now when you view the page, you'll see your open styles being applied to the <dt> tags when they're open and removed again when they're closed. But we can actually crunch our code to be a little bit smaller.

  4. One of the most powerful features of jQuery is called chaining. We've already used chaining in our code when we added slideToggle() to the next() method on one line.
    $(this).next().slideToggle();

    Methods in jQuery can be chained. You can keep adding new methods to further transform, modify or animate an element. This line of code gets the question, traverses the DOM to the next node, which we know is our <dd>, and then toggles the slide animation for that <dd>.

    We can take advantage of chaining again. We have a bit of redundancy in our code because we're starting two different lines with $(this). We can remove that extra $(this) and just add our toggleClass() method to the chain we've already started as follows: 

    $(this).toggleClass('open').next().slideToggle();
    Time for action — adding some final touches

What just happened?

We created CSS styles to style the open and closed states of our questions, and then we added a bit of code to our JavaScript to change the CSS class of the question to use our new styles. jQuery provides a few different methods for updating CSS classes, which is often a quick and easy way to update the display of our document in response to input from the site visitor. In this case, since we wanted to add and remove a class, we used the toggleClass() method. That saved us from having to figure out on our own if we needed to add or remove the open class.

We also took advantage of chaining to simply add this new functionality to our existing line of code, making the animated show and hide of the answer and the change of CSS class of our question happen all in just one line of code. How's that for impressive power in a short amount of code?

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.144.86.134