A guide to utilizing CSS to showcase the content of all four div elements in HTML body simultaneously

Question

A guide to utilizing CSS to showcase the content of all four div elements in HTML body simultaneously

Is there a way to use CSS to display the content of all 4 divs in the same place on the HTML body, based on the URL clicked? Only one div should be displayed at a time in the center of the page.

For example, if URL #1 is clicked, it should show the content of div #1, and so on for the other 3 divs. Each div should be displayed one at a time in the middle of the page.

CSS

.viewerpane {
  margin-top: 10px;
  margin-left: 100px;
  width: 1200px;
  height: 560px;
}

HTML

<div class="row">
  <div class="viewerpane" id="Swipe Access_viewerpane" style="position:relative"></div>
  <div class="viewerpane" id="After Office Hours_viewerpane" style="position:relative"></div>
  <div class="viewerpane" id="Weekend Access_viewerpane" style="position:relative"></div>
  <div class="viewerpane" id="All Users Data_viewerpane" style="position:relative"></div>
</div>

javascript jquery html css

Answer 1

Answer №1

Utilize the onclick attribute with tag a and employ either the .hide() or .show() function on a selector based on its id (without spaces).

function func(id){
$('.viewerpane').hide();
$('#'+id).show();
}

    .viewerpane {
      margin-top: 10px;
      margin-left: 100px;
      width: 1200px;
      height: 560px;
    }
    a{
    display:block;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" onclick="func('Swipe_Access_viewerpane')">Swipe_Access_viewerpane</a>
<a href="#" onclick="func('After_Office_Hours_viewerpane')">After_Office Hours_viewerpane</a>
<a href="#" onclick="func('Weekend_Access_viewerpane')">Weekend_Access_viewerpane</a>
<a href="#" onclick="func('All_Users_Data_viewerpane')">All_Users_Data_viewerpane</a>
<div class="row">
      <div class="viewerpane" id="Swipe_Access_viewerpane" style="position:relative">Swipe_Access_viewerpane</div>
      <div class="viewerpane" id="After_Office_Hours_viewerpane" style="position:relative">After_Office Hours_viewerpane</div>
      <div class="viewerpane" id="Weekend_Access_viewerpane" style="position:relative">Weekend_Access_viewerpane</div>
      <div class="viewerpane" id="All_Users_Data_viewerpane" style="position:relative">All_Users_Data_viewerpane</div>
    </div>

Answer 2

Utilize the onclick attribute with tag a and employ either the .hide() or .show() function on a selector based on its id (without spaces).

function func(id){
$('.viewerpane').hide();
$('#'+id).show();
}

    .viewerpane {
      margin-top: 10px;
      margin-left: 100px;
      width: 1200px;
      height: 560px;
    }
    a{
    display:block;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" onclick="func('Swipe_Access_viewerpane')">Swipe_Access_viewerpane</a>
<a href="#" onclick="func('After_Office_Hours_viewerpane')">After_Office Hours_viewerpane</a>
<a href="#" onclick="func('Weekend_Access_viewerpane')">Weekend_Access_viewerpane</a>
<a href="#" onclick="func('All_Users_Data_viewerpane')">All_Users_Data_viewerpane</a>
<div class="row">
      <div class="viewerpane" id="Swipe_Access_viewerpane" style="position:relative">Swipe_Access_viewerpane</div>
      <div class="viewerpane" id="After_Office_Hours_viewerpane" style="position:relative">After_Office Hours_viewerpane</div>
      <div class="viewerpane" id="Weekend_Access_viewerpane" style="position:relative">Weekend_Access_viewerpane</div>
      <div class="viewerpane" id="All_Users_Data_viewerpane" style="position:relative">All_Users_Data_viewerpane</div>
    </div>

Answer 3

Answer №2

One way to achieve this is by using CSS exclusively.

div,
input {
  display: none;
}

label {
  cursor: pointer;
}

label:hover {
  color: red;
}

label:not(:last-child) {
  margin-right: 1rem;
}

#n1:checked~.n1 {
  display: inline-block;
}

#n2:checked~.n2 {
  display: inline-block;
}

#n3:checked~.n3 {
  display: inline-block;
}

#n4:checked~.n4 {
  display: inline-block;
}

<input type="radio" name="sel" id="n1"><label for="n1">Link 1</label>
<input type="radio" name="sel" id="n2"><label for="n2">Link 2</label>
<input type="radio" name="sel" id="n3"><label for="n3">Link 3</label>
<input type="radio" name="sel" id="n4"><label for="n4">Link 4</label>

<div class="n1">
  <p>Option 1</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
  aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="n2">
  <p>Option 2</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
  aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="n3">
  <p>Option 3</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
  aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="n4">
  <p>Option 4</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
  aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Answer 4

One way to achieve this is by using CSS exclusively.

div,
input {
  display: none;
}

label {
  cursor: pointer;
}

label:hover {
  color: red;
}

label:not(:last-child) {
  margin-right: 1rem;
}

#n1:checked~.n1 {
  display: inline-block;
}

#n2:checked~.n2 {
  display: inline-block;
}

#n3:checked~.n3 {
  display: inline-block;
}

#n4:checked~.n4 {
  display: inline-block;
}

<input type="radio" name="sel" id="n1"><label for="n1">Link 1</label>
<input type="radio" name="sel" id="n2"><label for="n2">Link 2</label>
<input type="radio" name="sel" id="n3"><label for="n3">Link 3</label>
<input type="radio" name="sel" id="n4"><label for="n4">Link 4</label>

<div class="n1">
  <p>Option 1</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
  aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="n2">
  <p>Option 2</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
  aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="n3">
  <p>Option 3</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
  aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="n4">
  <p>Option 4</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
  aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Answer 5

Answer №3

html

<div class="content">
  <div class="viewerpane hidden" id="Swipe_Access_viewerpane">
    <p>test data1</p> 
  </div>
  <div class="viewerpane hidden" id="After_Office_Hours_viewerpane">
    <p>test data2</p>
  </div>
  <div class="viewerpane hidden" id="Weekend_Access_viewerpane">
    <p>test data3</p> 
  </div>
  <div class="viewerpane hidden" id="All_Users_Data_viewerpane">
    <p>test data4</p> 
  </div>
</div>      
<a id="click-me">click here to see the effect</a>

css

.content {
  position: relative;
  height: 900px;
 }
.viewerpane {
  display: block;
  text-align: center;
  width: 1200px;
  height: 560px; 
  position:absolute;
  top:50%;
  left:50%;
  transform:translateY(-50%)  translateX(-50%);
  -webkit-transform:translateY(-50%)  translateX(-50%);
  -moz-transform:translateY(-50%)  translateX(-50%);
  -ms-transform:translateY(-50%)  translateX(-50%);
  display: table;
}
.viewerpane p {
  display: table-cell;
  vertical-align: middle;
}
.hidden {
  display: none;
}

javasript:

let divs_to_show;
let index = 0;
document.addEventListener('DOMContentLoaded',function(e) 
{
let divs = document.getElementsByClassName('viewerpane');
divs_to_show = Array.from(divs);
showDiv(); 
});

document.querySelector('#click-me').addEventListener('click', changeDiv);

function changeDiv(e) 
{ 
 divs_to_show.forEach(div => 
  {
   div.className = 'viewerpane hidden';
  });
  showDiv();
  e.preventDefault();
}

function showDiv() 
{
 divs_to_show[index].className = 'viewerpane';index++;
}

check out the working example on this link https://codepen.io/kamindu/pen/bxGxqZ

Answer 6

html

<div class="content">
  <div class="viewerpane hidden" id="Swipe_Access_viewerpane">
    <p>test data1</p> 
  </div>
  <div class="viewerpane hidden" id="After_Office_Hours_viewerpane">
    <p>test data2</p>
  </div>
  <div class="viewerpane hidden" id="Weekend_Access_viewerpane">
    <p>test data3</p> 
  </div>
  <div class="viewerpane hidden" id="All_Users_Data_viewerpane">
    <p>test data4</p> 
  </div>
</div>      
<a id="click-me">click here to see the effect</a>

css

.content {
  position: relative;
  height: 900px;
 }
.viewerpane {
  display: block;
  text-align: center;
  width: 1200px;
  height: 560px; 
  position:absolute;
  top:50%;
  left:50%;
  transform:translateY(-50%)  translateX(-50%);
  -webkit-transform:translateY(-50%)  translateX(-50%);
  -moz-transform:translateY(-50%)  translateX(-50%);
  -ms-transform:translateY(-50%)  translateX(-50%);
  display: table;
}
.viewerpane p {
  display: table-cell;
  vertical-align: middle;
}
.hidden {
  display: none;
}

javasript:

let divs_to_show;
let index = 0;
document.addEventListener('DOMContentLoaded',function(e) 
{
let divs = document.getElementsByClassName('viewerpane');
divs_to_show = Array.from(divs);
showDiv(); 
});

document.querySelector('#click-me').addEventListener('click', changeDiv);

function changeDiv(e) 
{ 
 divs_to_show.forEach(div => 
  {
   div.className = 'viewerpane hidden';
  });
  showDiv();
  e.preventDefault();
}

function showDiv() 
{
 divs_to_show[index].className = 'viewerpane';index++;
}

check out the working example on this link https://codepen.io/kamindu/pen/bxGxqZ

A guide to utilizing CSS to showcase the content of all four div elements in HTML body simultaneously

CSS

HTML

Answer №1

Answer №2

Answer №3

Similar questions

Using JavaScript to manage form input values in React

Responsive full-screen background image display

What is the best way to align an image in the middle of an image slider within a Bootstrap

Styled-components is not recognizing the prop `isActive` on a DOM element in React

Troubleshoot: Why Your jQuery AJAX Post Requests Are Failing

Using AngularJS variables within JavaScript code

Markdown Custom Parsing

Display a notification upon successfully submitting data in Laravel and Vue.js

There are times when the `window.location.replace` function does not

Delayed AJAX request impedes following page loading

NodeJS error message: "The callback provided is not a function

What is the best way to loop through a list of questions and save the answers in an array of user input?

The routing is not functioning properly as anticipated

Bootstrap wysiwyg5 editor validation: Ensuring accuracy in your content creation

Save the ID of the list item by wrapping it and storing it in a table cell

Display the div only if the content matches the text of the link

Including content without triggering the digest cycle (utilizing raw HTML) within a Directive

Encountering an error in a React application with Redux: "Unable to access the 'state' property of undefined"

Tips for avoiding an automatic slide up in a CSS menu

Vue Google Tag Manager Error: This file type requires a specific loader to be handled correctly