Javascript/jQuery Tutorials

Different ways to display only the content you want to see

Demos

Sometimes you have a lot of content on a page, and you don't want it all displaying at the same time, overwhelming the poor user. Here are three examples of ways to let the site user only see the content they want/need to see at any given time.

For the examples below, we are going to have the same set of 3 biographies of some of the best action stars of the 80s and 90s, showing you how you can display this content in different ways.

Type 1: Toggle Showing/Hiding Content

This technique allows you to toggle whether the content is being displayed or hidden.

Arnold Schwarzenegger

picture of Arnold Schwarzenegger

Arnold Alois Schwarzenegger (born July 30, 1947) is an Austrian-American actor, model, producer, director, activist, businessman, investor, writer, philanthropist, former professional bodybuilder, and politician. Schwarzenegger served two terms as the 38th Governor of California from 2003 until 2011.

Bruce Willis

Picture of Bruce Willis

Walter Bruce Willis (born March 19, 1955) is an American actor, producer and singer. His career began on the Off-Broadway stage and then in television in the 1980s, most notably as David Addison in Moonlighting (1985–89). He is perhaps best known for his role of John McClane in the Die Hard series, which were mostly critical and uniformly financial successes. He has appeared in over sixty films, including Color of Night (1994), Pulp Fiction (1994), 12 Monkeys (1995), The Fifth Element (1997), Armageddon (1998), The Sixth Sense (1999), Unbreakable (2000), Sin City (2005), Red (2010) and The Expendables 2 (2012).

Sylvester Stallone

Picture of Sylvester Stallone

Sylvester Gardenzio Stallone (born July 6, 1946), nicknamed Sly Stallone, is an American actor, screenwriter and film director. Stallone is well known for his Hollywood action roles, particularly boxer Rocky Balboa, the title character of the Rocky series from 1976 to 2006, and soldierJohn Rambo from the Rambo saga, which ran from 1982 to 2008. He wrote every episode of the two franchises, and directed some of their instalments as well.


Type 2: Accordion Panes

This technique creates accordion panes that open and close, and hide if another pane is clicked on.

Arnold Schwarzenegger

picture of Arnold Schwarzenegger

Arnold Alois Schwarzenegger (born July 30, 1947) is an Austrian-American actor, model, producer, director, activist, businessman, investor, writer, philanthropist, former professional bodybuilder, and politician. Schwarzenegger served two terms as the 38th Governor of California from 2003 until 2011.

Schwarzenegger began weight training at the age of 15. He won the Mr. Universe title at age 20 and went on to win the Mr. Olympia contest seven times. Schwarzenegger has remained a prominent presence in bodybuilding and has written many books and articles on the sport. He is widely considered to be among the greatest bodybuilders of all times as well as its biggest icon. Schwarzenegger gained worldwide fame as a Hollywood action film icon. Schwarzenegger's breakthrough film was the sword-and-sorcery epic Conan the Barbarian in 1982, which was a box-office hit and resulted in a sequel. In 1984, he appeared in James Cameron's science-fiction thriller film The Terminator, which was a massive critical and box-office success. Schwarzenegger subsequently reprised theTerminator character in the franchise's later installments in 1991, 2003, and 2015. He appeared in a number of successful films, such as Commando (1985), The Running Man (1987), Predator (1987), Twins (1988), Total Recall (1990), Kindergarten Cop (1990) and True Lies (1994). He was nicknamed the "Austrian Oak" in his bodybuilding days, "Arnie" during his acting career, and "The Governator" (a portmanteau of "Governor" and "The Terminator", one of his best-known movie roles).

As a Republican, he was first elected on October 7, 2003, in a special recall election to replace then-Governor Gray Davis. Schwarzenegger was sworn in on November 17, to serve the remainder of Davis's term. Schwarzenegger was then re-elected on November 7, 2006, in California's 2006 gubernatorial election, to serve a full term as governor, defeating Democrat Phil Angelides, who was California State Treasurer at the time. Schwarzenegger was sworn in for his second term on January 5, 2007. In 2011, Schwarzenegger completed his second term as governor.

Bruce Willis

Picture of Bruce Willis

Walter Bruce Willis (born March 19, 1955) is an American actor, producer and singer. His career began on the Off-Broadway stage and then in television in the 1980s, most notably as David Addison in Moonlighting (1985–89). He is perhaps best known for his role of John McClane in the Die Hard series, which were mostly critical and uniformly financial successes. He has appeared in over sixty films, including Color of Night (1994), Pulp Fiction (1994), 12 Monkeys (1995), The Fifth Element (1997), Armageddon (1998), The Sixth Sense (1999), Unbreakable (2000), Sin City (2005), Red (2010) and The Expendables 2 (2012).

Motion pictures featuring Willis have grossed US$2.64 billion to $3.05 billion at North American box offices, making him the eighth highest-grossing actor in a leading role and 12th-highest including supporting roles. He is a two-time Emmy Award–winning, Golden Globe Award–winning and four-time Saturn Award–nominated actor. Willis was married to actress Demi Moore and they had three daughters before their divorce in 2000, following thirteen years of marriage. Since 2009, he has been married to model Emma Heming, with whom he has two daughters.

Sylvester Stallone

Picture of Sylvester Stallone

Sylvester Gardenzio Stallone (born July 6, 1946), nicknamed Sly Stallone, is an American actor, screenwriter and film director. Stallone is well known for his Hollywood action roles, particularly boxer Rocky Balboa, the title character of the Rocky series from 1976 to 2006, and soldierJohn Rambo from the Rambo saga, which ran from 1982 to 2008. He wrote every episode of the two franchises, and directed some of their instalments as well.

Stallone directed, co-wrote and starred in the 2010 ensemble action film The Expendables, alongside many other distinguished actors. He reprised his role of Barney Ross in two more Expendables films, The Expendables 2 in 2012 and The Expendables 3 in 2014, although he did not return to direct the two sequels.

Stallone's film Rocky was inducted into the National Film Registry as well as having its film props placed in theSmithsonian Museum. Stallone's use of the front entrance to the Philadelphia Museum of Art in the Rocky series led the area to be nicknamed the Rocky Steps. Philadelphia has a statue of his Rocky character placed permanently near the museum. It was announced on December 7, 2010 that Stallone was voted into boxing's Hall of Fame.

In 1977, Stallone was nominated for two Academy Awards for Rocky, Best Original Screenplay and Best Actor. He became the third man in history to receive these two nominations for the same film, after Charles Chaplin and Orson Welles and followed by Woody Allen, Warren Beatty, Billy Bob Thornton, Matt Damon and Roberto Benigni.


Type 3: Tabbed Content

Tabs allow a lot of content to be placed into a smaller space

Arnold Schwarzenegger

Picture of Arnold Schwarzenegger

Arnold Alois Schwarzenegger (born July 30, 1947) is an Austrian-American actor, model, producer, director, activist, businessman, investor, writer, philanthropist, former professional bodybuilder, and politician. Schwarzenegger served two terms as the 38th Governor of California from 2003 until 2011.

Schwarzenegger began weight training at the age of 15. He won the Mr. Universe title at age 20 and went on to win the Mr. Olympia contest seven times. Schwarzenegger has remained a prominent presence in bodybuilding and has written many books and articles on the sport. He is widely considered to be among the greatest bodybuilders of all times as well as its biggest icon. Schwarzenegger gained worldwide fame as a Hollywood action film icon. Schwarzenegger's breakthrough film was the sword-and-sorcery epic Conan the Barbarian in 1982, which was a box-office hit and resulted in a sequel. In 1984, he appeared in James Cameron's science-fiction thriller film The Terminator, which was a massive critical and box-office success. Schwarzenegger subsequently reprised theTerminator character in the franchise's later installments in 1991, 2003, and 2015. He appeared in a number of successful films, such as Commando (1985), The Running Man (1987), Predator (1987), Twins (1988), Total Recall (1990), Kindergarten Cop (1990) and True Lies (1994). He was nicknamed the "Austrian Oak" in his bodybuilding days, "Arnie" during his acting career, and "The Governator" (a portmanteau of "Governor" and "The Terminator", one of his best-known movie roles).

As a Republican, he was first elected on October 7, 2003, in a special recall election to replace then-Governor Gray Davis. Schwarzenegger was sworn in on November 17, to serve the remainder of Davis's term. Schwarzenegger was then re-elected on November 7, 2006, in California's 2006 gubernatorial election, to serve a full term as governor, defeating Democrat Phil Angelides, who was California State Treasurer at the time. Schwarzenegger was sworn in for his second term on January 5, 2007. In 2011, Schwarzenegger completed his second term as governor.

Bruce Willis

Picture of Bruce Willis

Walter Bruce Willis (born March 19, 1955) is an American actor, producer and singer. His career began on the Off-Broadway stage and then in television in the 1980s, most notably as David Addison in Moonlighting (1985–89). He is perhaps best known for his role of John McClane in the Die Hard series, which were mostly critical and uniformly financial successes. He has appeared in over sixty films, including Color of Night (1994), Pulp Fiction (1994), 12 Monkeys (1995), The Fifth Element (1997), Armageddon (1998), The Sixth Sense (1999), Unbreakable (2000), Sin City (2005), Red (2010) and The Expendables 2 (2012).

Motion pictures featuring Willis have grossed US$2.64 billion to $3.05 billion at North American box offices, making him the eighth highest-grossing actor in a leading role and 12th-highest including supporting roles. He is a two-time Emmy Award–winning, Golden Globe Award–winning and four-time Saturn Award–nominated actor. Willis was married to actress Demi Moore and they had three daughters before their divorce in 2000, following thirteen years of marriage. Since 2009, he has been married to model Emma Heming, with whom he has two daughters.

Sylvester Stallone

Picture of Sylvester Stallone

Sylvester Gardenzio Stallone (born July 6, 1946), nicknamed Sly Stallone, is an American actor, screenwriter and film director. Stallone is well known for his Hollywood action roles, particularly boxer Rocky Balboa, the title character of the Rocky series from 1976 to 2006, and soldierJohn Rambo from the Rambo saga, which ran from 1982 to 2008. He wrote every episode of the two franchises, and directed some of their instalments as well.

Stallone directed, co-wrote and starred in the 2010 ensemble action film The Expendables, alongside many other distinguished actors. He reprised his role of Barney Ross in two more Expendables films, The Expendables 2 in 2012 and The Expendables 3 in 2014, although he did not return to direct the two sequels.

Stallone's film Rocky was inducted into the National Film Registry as well as having its film props placed in theSmithsonian Museum. Stallone's use of the front entrance to the Philadelphia Museum of Art in the Rocky series led the area to be nicknamed the Rocky Steps. Philadelphia has a statue of his Rocky character placed permanently near the museum. It was announced on December 7, 2010 that Stallone was voted into boxing's Hall of Fame.

In 1977, Stallone was nominated for two Academy Awards for Rocky, Best Original Screenplay and Best Actor. He became the third man in history to receive these two nominations for the same film, after Charles Chaplin and Orson Welles and followed by Woody Allen, Warren Beatty, Billy Bob Thornton, Matt Damon and Roberto Benigni.