How to load new divs on click without using javascript?

Hey guys,
I came across a Website and i was wondering how is the new content displayed on clicking different links (About, Work, Contact) here because when i viewed page source i could not find any javascript code written to toggle display property (or anything similar to that) and there is no use of ajax here. THIS is another website that has similar effects, when we click on navigation links a new section is displayed. I want to make a landing page like the one in the second link. Please help me in understanding how it is done.

Thank you.

If you look in the page source (of your first link), there are 2 <script> tags near the bottom:
<script src="http://threejs.org/examples/js/libs/stats.min.js"></script>
<script src="./particles.js"></script>

If you move on over to the “Sources” tab (in chrome), you will see a couple of files name “main.js” and “particles.js”. So this page uses javascript.

The second link has several scripts inside of the <head> tag. So they are using javascript as well.

It is possible to create a website using only HTML and CSS, but these days most modern functionality comes from javascript. It will be a lot easier to implement the types of things you want with javascript, if you learn how to use it.

Welcome to the community! Keep on asking questions when you need to, we are here to help.

Hi Lucas,
Thanks for the welcome. Here particle js is used to add the effect you see in the back, three js is a dependency for particle js and main js is used to add the typewriter effect and carousel. But I want to know about the how the new content is appearing on clicking different navigation links (About, Work, Contact). Please shed some light on that.

Thank you

All the content is off-screen and gets put on/off-screen by triggering the .contenton/.contentoff classes using JS. I think the .contenton class is just used as a scope and does not have any styles on its own.

/* for the contact */
.contactwindow.contentoff {
    transform: translate(0, 100%);
}
.contentoff {
    visibility: hidden;
}
.contentoff {
    transform: scale(0);
    width: 0;
}
contents.forEach(ctn => {
  ctn.classList.add('contentoff')
  ctn.classList.remove('contenton')
  if (ctn.classList.contains(contentclass)) {
    ctn.classList.remove('contentoff')
    ctn.classList.add('contenton')
  }
})
1 Like

Thanks lasjorg. I didnt see this,

contents.forEach(ctn => {
  ctn.classList.add('contentoff')
  ctn.classList.remove('contenton')
  if (ctn.classList.contains(contentclass)) {
    ctn.classList.remove('contentoff')
    ctn.classList.add('contenton')
  }

Thanks for your help.