Change of content within a div-CodePudding

I am looking into ways of changing the content within a div based on a specific button.

Basically I have this:

By default, the contents of the "National League" will show up, so when I click on "MHA Cup", the content will change to games that are "MHA CUP" related and as well as "Friendlies".

How can something like this be done?

@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;600;700;800;900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Raleway", sans-serif;
}

body {
  background: #e5e5e5;
  width: 100vw;
}

ul,
li {
  list-style: none;
}

.parent {
  display: flex;
  flex-direction: column;
  width: 60%;
  margin: 75px auto;
}

.parent h1 {
  font-weight: 900;
  font-size: 16px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.parent ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.category {
  display: flex;
  flex-direction: row;
}

.category li {
  margin-right: 30px;
  padding-bottom: 5px;
  margin-bottom: 50px;
  border-bottom: 2.5px solid #01296f;
}

.category li,
.show-all li {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 600;
}

.match {
  display: flex;
  justify-content: space-between;
  background: white;
  align-items: center;
  height: 120px;
  border-bottom: 1px solid #F0F0F0;
}

.match-details {
  text-align: center;
}

#friendlies {
  border: 2px solid red;
}

#mha-cup {
  border: 2px solid purple;
}

.home-team,
.away-team {
  display: flex;
  align-items: center;
}

.team-badge {
  background: grey;
  height: 42px;
  width: 42px;
  border-radius: 50%;
  margin: 30px;
}

.team-name {
  font-weight: 700;
  padding: -10px;
  text-transform: uppercase;
  font-size: 12px;
}

.match-type{
  margin: 20px;
  font-size: 12px;
  font-weight: 600;
  color: #999999;
  letter-spacing: 1px;
}

.match-score span{
  background: #01296f;
  color: white;
  border-radius: 5px;
  padding: 7.5px 10px;
}

.match-status{
  margin: 20px;
  font-size: 10px;
  letter-spacing: 1px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="styles.css" />
    <title>Static Template</title>
  </head>
  <body>
    <div >
      <h1>Latest Matches</h1>
      <ul>
        <div >
          <li>National League</li>
          <li>MHA Cup</li>
          <li>Friendlies</li>
        </div>
        <div >
          <li>Show All</li>
        </div>
      </ul>

      <div  id="national-league">
        <div >
          <div >
            <div ></div>
            <span >La Salle</span>
          </div>
          <div >
            <div >
              <h4>MHA CUP - SEMIFINALS</h4>
            </div>
            <div >
              <span>25 - 24</span>  
            </div>
            <div >
                FULL TIME
            </div>
          </div>
          <div >
            <span >HMS</span>
            <div ></div>
          </div>
        </div>
        <div >
          <div >
            <div ></div>
            <span >La Salle</span>
          </div>
          <div >
            <div >
              <h4>MHA CUP - SEMIFINALS</h4>
            </div>
            <div >
              <span>25 - 24</span>  
            </div>
            <div >
                FULL TIME
            </div>
          </div>
          <div >
            <span >HMS</span>
            <div ></div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

CodePudding user response：

Not the most efficient but an easy way to do this without having to add Bootstrap/JQuery is to use JavaScript to add/remove "display: none;" style to the content you want to show and hide and set the button as the trigger to alternate between the two.

CodePudding user response：

you can just give put display none to each div you want to hide with javascript is quite easy actually.

here is how you do it

let ids = ['friendlies', 'national-league', 'mha-cup']

function show(tab) {
  ids.forEach((id) => {
    document.getElementById(id).style = 'display: none'
  });
  document.getElementById(tab).style = 'display: block';
}

function showAll() {
  ids.forEach((id) => {
    document.getElementById(id).style = 'display: block'
  });
}

@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;600;700;800;900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Raleway", sans-serif;
}

body {
  background: #e5e5e5;
  width: 100vw;
}

ul,
li {
  list-style: none;
}

.parent {
  display: flex;
  flex-direction: column;
  width: 60%;
  margin: 75px auto;
}

.parent h1 {
  font-weight: 900;
  font-size: 16px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.parent ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.category {
  display: flex;
  flex-direction: row;
}

.category li {
  margin-right: 30px;
  padding-bottom: 5px;
  margin-bottom: 50px;
  border-bottom: 2.5px solid #01296f;
}

.category li,
.show-all li {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 600;
}

.match {
  display: flex;
  justify-content: space-between;
  background: white;
  align-items: center;
  height: 120px;
  border-bottom: 1px solid #F0F0F0;
}

.match-details {
  text-align: center;
}

#friendlies {
  border: 2px solid red;
}

#mha-cup {
  border: 2px solid purple;
}

.home-team,
.away-team {
  display: flex;
  align-items: center;
}

.team-badge {
  background: grey;
  height: 42px;
  width: 42px;
  border-radius: 50%;
  margin: 30px;
}

.team-name {
  font-weight: 700;
  padding: -10px;
  text-transform: uppercase;
  font-size: 12px;
}

.match-type {
  margin: 20px;
  font-size: 12px;
  font-weight: 600;
  color: #999999;
  letter-spacing: 1px;
}

.match-score span {
  background: #01296f;
  color: white;
  border-radius: 5px;
  padding: 7.5px 10px;
}

.match-status {
  margin: 20px;
  font-size: 10px;
  letter-spacing: 1px;
}

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="styles.css" />
    <title>Static Template</title>
  </head>

  <body>
    <div >
      <h1>Latest Matches</h1>
      <ul>
        <div >
          <li><button onClick="show('national-league');">National League</button></li>
          <li><button onClick="show('mha-cup');">
              MHA Cup
            </button></li>
          <li><button onClick="show('friendlies');">
              Friendlies
            </button></li>
        </div>
        <div >
          <li><button onClick="showAll();">
              Show All
            </button></li>
        </div>
      </ul>

      <div  id="mha-cup">
        <div >
          <div >
            <div ></div>
            <span >La Salle</span>
          </div>
          <div >
            <div >
              <h4>MHA CUP - SEMIFINALS</h4>
            </div>
            <div >
              <span>25 - 24</span>
            </div>
            <div >
              FULL TIME
            </div>
          </div>
          <div >
            <span >HMS</span>
            <div ></div>
          </div>
        </div>
        <div >
          <div >
            <div ></div>
            <span >La Salle</span>
          </div>
          <div >
            <div >
              <h4>MHA CUP - SEMIFINALS</h4>
            </div>
            <div >
              <span>25 - 24</span>
            </div>
            <div >
              FULL TIME
            </div>
          </div>
          <div >
            <span >HMS</span>
            <div ></div>
          </div>
        </div>
      </div>

      <div  id="national-league">
        <div >
          <div >
            <div ></div>
            <span >La Salle</span>
          </div>
          <div >
            <div >
              <h4>National League</h4>
            </div>
            <div >
              <span>25 - 24</span>
            </div>
            <div >
              FULL TIME
            </div>
          </div>
          <div >
            <span >HMS</span>
            <div ></div>
          </div>
        </div>
        <div >
          <div >
            <div ></div>
            <span >La Salle</span>
          </div>
          <div >
            <div >
              <h4>MHA CUP - SEMIFINALS</h4>
            </div>
            <div >
              <span>25 - 24</span>
            </div>
            <div >
              FULL TIME
            </div>
          </div>
          <div >
            <span >HMS</span>
            <div ></div>
          </div>
        </div>
      </div>

      <div  id="friendlies">
        <div >
          <div >
            <div ></div>
            <span >La Salle</span>
          </div>
          <div >
            <div >
              <h4>Friendlies</h4>
            </div>
            <div >
              <span>25 - 24</span>
            </div>
            <div >
              FULL TIME
            </div>
          </div>
          <div >
            <span >HMS</span>
            <div ></div>
          </div>
        </div>
        <div >
          <div >
            <div ></div>
            <span >La Salle</span>
          </div>
          <div >
            <div >
              <h4>MHA CUP - SEMIFINALS</h4>
            </div>
            <div >
              <span>25 - 24</span>
            </div>
            <div >
              FULL TIME
            </div>
          </div>
          <div >
            <span >HMS</span>
            <div ></div>
          </div>
        </div>
      </div>

    </div>
  </body>

</html>