How to use CSS to display all the 4 div:s content in a same place of HTML body

I have 4 div:s, at a time only one div content is displayed in the specified position of the html body, how to use css to display all the 4 div's content in a same place based on the url clicked.

If url #1 was clicked it should display the content in div #1, and so on - for 4 divs, but only one div at a time should be displayed 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>


width

height

3 Answers
3

Use onclick to a and in function .hide() or .show() selector by his id(without space)

onclick

a

.hide()

.show()

id

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>

You can use a CSS only solution for this.

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>

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++;



see the live example here https://codepen.io/kamindu/pen/bxGxqZ

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.