which replaces the text content of the user-name element with the value we stored in our name variable. Try it yourself Showing and hiding content show-hide Showing and hiding content is the special leads to nuts and bolts of user interface code. Dropdown menus, modal dialogs, slide shows, and tabs all require this simple functionality — showing and hiding page elements as necessary. jQuery has few methods to show and hide content:show() and hide() methods — do what they say toggle() — toggles between show() and hide() methods, depending on current visibility of the elementConsider this example: Try it yourself Tip: Try replacing show() and hide() with slideUp() and slideDown() method to get an interesting animation effect.
The code above is straightforward — we are using the click method on #show-btn and which runs showing and hide menu functions respectively. However, this seems like a lot of work for simple functionality. It would be much better if we had a way to use one button which toggles the state of the menu – show it if it’s hidden, and hide it if it’s visible. The toggle method does exactly that: Voila! Our code is cut in half and we have a nice-looking dropdown menu. Try it yourself Tip: Replace toggle() with slideToggle() method to get an interesting animation effect. 3. Moving things around moving Modifying web page layout on the fly is a huge use case for jQuery. The most common methods are appendTo and prependTo, which move the selection to another element.