OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to change main content when sidebar item is clicked

  • Thread starter Thread starter swagless_monk
  • Start date Start date
S

swagless_monk

Guest
Browsing stackoverflow, I see this as a very popular topic using various IDEs but none suitable to my needs.

I am working on a single page app (using: html, javascript, css) that has several files: main content, main header, main footer, index, stlye, top, side. Main content will display content depending on which item is clicked in the sidebar, side and the sidebar list depends on which topbar item is clicked from top

Selecting a topbar element and displaying the proper sidebar is working fine but after this step, how do I get different info into the main content depending on which sidebar item is clicked

An example of the sidebar functionality is here: http://balloob.github.io/react-sidebar/example/responsive_example.html

so if I were to click on Mock menu item 0, certain content will load to the main stage if Mock menu item 1, different content loads. . . . if Mock menu item n, nth content loads

I want to display html tables on the main stage when I can click on a sidebar item

I have tried the following code by placing it in the main content file:

Code:
<script>
function showContent() {
var x = document.getElementById("table");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>

and then calling the function from side as below:

<div id="CV" class="dynamic-content"><li onclick="showContent()" class="side-bar-item"><a class="side-link" href="website_name">LINK</a></li></div>

This only creates a blank page named website_name

<p>Browsing stackoverflow, I see this as a very popular topic using various IDEs but none suitable to my needs.</p>

<p>I am working on a single page app (using: html, javascript, css) that has several files: <code>main content</code>, <code>main header</code>, <code>main footer</code>, <code>index</code>, <code>stlye</code>, <code>top</code>, <code>side</code>.
<code>Main content</code> will display content depending on which item is clicked in the sidebar, <code>side</code> and the sidebar list depends on which topbar item is clicked from <code>top</code></p>

<p>Selecting a topbar element and displaying the proper sidebar is working fine but after this step, how do I get different info into the main content depending on which sidebar item is clicked</p>

<p>An example of the sidebar functionality is here: <a href="http://balloob.github.io/react-sidebar/example/responsive_example.html" rel="nofollow noreferrer">http://balloob.github.io/react-sidebar/example/responsive_example.html</a></p>

<p>so if I were to click on <code>Mock menu item 0</code>, certain content will load to the main stage
if <code>Mock menu item 1</code>, different content loads.
.
.
.
if <code>Mock menu item n</code>, nth content loads</p>

<p>I want to display html tables on the main stage when I can click on a sidebar item </p>

<p>I have tried the following code by placing it in the <code>main content</code> file:</p>

<pre><code><script>
function showContent() {
var x = document.getElementById("table");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</code></pre>

<p>and then calling the function from <code>side</code> as below:</p>

<p><code><div id="CV" class="dynamic-content"><li onclick="showContent()" class="side-bar-item"><a class="side-link" href="website_name">LINK</a></li></div></code></p>

<p>This only creates a blank page named <code>website_name</code></p>
 

Latest posts

Top