Time for action — making it fancy

  1. Let's start with a little CSS to change the cursor to a pointer and add a little hover effect to our questions to make it obvious to site visitors that the questions are clickable. Open up the styles.css file that's inside the styles folder and add this bit of CSS:
    dt {
color: #268bd2;
font-weight: bold;
cursor: pointer;
margin: 0 0 1em 0;
}
dt:hover {
color: #2aa198;
}

    That definitely helps to communicate to the site visitor that the questions are clickable.

    Time for action — making it fancy
  2. When we click a question to see the answer, the change isn't communicated to the site visitor very well — the jump in the page is a little disconcerting and it takes a moment to realize what just happened. It would be nicer and easier to understand if the question were to slide into view; the site visitor could literally see the question appearing and would understand immediately what change just happened on the screen.

    jQuery makes it easy for us. We just have to replace our call to the .toggle() method with a call to the .slideToggle() method. 

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

Now if you view the page in your browser, you can see that the questions slide smoothly into and out of view when the question is clicked. It's easy to understand what's happening when the page changes, and the animation is a nice touch.

What just happened?

We replaced our toggle() method with the slideToggle() method to animate the showing and hiding of the answers. This makes it easier for the site visitor to understand the change that's taking place on the page. We also added some CSS to make the questions appear to be clickable to communicate the abilities of our page to our site visitors.

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

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