If you saw the example in the events, our example will look very familiar.
Pretty awesome, huh? We are using the different ids of the buttons to run the jQuery function that we want. We use two effects here, hide and show to change the visibility of the first <li> in our <ul> with an id of someList. Obviously, the hide effect is the one that makes the element invisible, and the show effect makes the element visible.
More Common Effects
- animate() – changes a set of CSS properties with the option to animate the changes.
- fadeIn() – animates the element from hidden to visible
- fadeOut() – animates the element from visible to hidden
- slideDown() – animates the change of the elements height from hidden to visible
- slideUp() – animates the change of the elements height from visible to hidden
- toggle() – alternatives between show and hide effects
One quick note here. We could have only used one button in the example above if we used toggle instead of hide and show. Remember, effects are your friend. Also, don’t forget to use jQuery’s official reference guide at jQuery Effects.