How can I create a button that displays content within a div?

[Malcolm]

Hello All!​

I'm developing a resume-website and I've gotten it pretty much where I need to. But there's one last step I need to work on and it's the content and how to display it. I decided that I was going to use buttons and when you click them it would show the content.

E.g.: Click About Me > Content area shows about me content.

I've done a bit of research and read something about an "OnClick", but I tried the examples from what I found online and have not gotten the result I want. My goal is that when I click on a button, it will display the content within the content area as I mentioned above. Can someone please point me in the right direction?

Below is what I want:

Screenshot

Captured with Lightshot

prnt.sc

 

[LTomy]

You could give an id for each div that represents a section (Ex. id="section1"). Each div that is not currently displayed has the style display: none;.
You create a function that takes the id of a div in argument and applies it the style display: inline-block (Making it appear) and sets the div that was displayed with the style display: none; (It saves the number of the currently displayed div in a variable).
If the function is named displaySection, you could give the attribute onClick="displaySection(1)" to the first button, onClick="displaySection(2)" to the second one...

I do not know if my explanation is clear or not .

 

[Malcolm]

That was kinda what I was thinking I'll give it a try. I may have to start another project and just build something with tabs.

 

[ivan.moony]

Hi @Malcolm!

Place buttons of your choice in the column to the left. Place an "iframe" to the right of them and assign a unique "id" attribute to it. Then setup each button onclick event attribute as:

<... onclick="document.getElementById('...iframe_id...').src='file_of_your_choice.html'" ...>

You'll have to make several html content files, each corresponding to specific button, which will open inside the iframe upon clicking the buttons.

[edit]
If you really want a div content version, I'd recommend a navbar to the left, and static div contents to the right. You'd have to make several htmls, each with the same navbar, but with a different div content. There are other options with div (like setting innerHTML property in script for example, or even harder - manipulating DOM) but this is the most SEO friendly version I can think of.

 

[Tealk]

I did something similar for my pen and paper ruleset, there the website is delivered via GitLab, there also only HTML, CSS and JS works.

I use Bootstrap.
The button:

<a class="nav-link" onclick="showHome()"><i class="fas fa-home"></i></a>

JS code:

function showHome() {
    $("#content").load("templates/home.html");
}

this will load the content to be displayed from the file

 

[AskBrillz]

can you please give more clarity about your question

 

[Malcolm]

can you please give more clarity about your question

Basically what I want to do is when you click a tab it displays content.

 

[Malcolm]

Thanks all for replying! I’ll be trying your solutions soon.

 

[Malcolm]

Hi all! Still working on this, @ivan.moony I tried with your solution first but seems to have few kinks (appearance & performance) I have to work out such as load time. It appears that having an iframe uses a bit of memory which is causing performance issues. I'm still looking into it.

I'm going to keep trying your solutions guys! Thank you so much!