I'm trying to keep a static list of contents (around 10 bullet points) that will show and hide text when each different heading/title is clicked. I can kind of get there but I think i'm taking the long way since i'm unfamiliar with JS.
Wondering if someone can show me a better/easier way to do this because my JS looks absolutely silly and i'd have to repeat it a lot for my method.
Side note: for some reason i need to click the title/header twice for the JS to work
function pointOne() {
var x = document.getElementById("contentOne");
var y = document.getElementById("firstText");
var z = document.getElementById("contentTwo");
if (x.style.display === "none") {
x.style.display = "block";
y.style.display = "none";
z.style.display = "none";
} else {
x.style.display = "none";
y.style.display = "block";
z.style.display = "none";
}
}
function pointTwo() {
var x = document.getElementById("contentTwo");
var y = document.getElementById("firstText");
var z = document.getElementById("contentOne");
if (x.style.display === "none") {
x.style.display = "block";
y.style.display = "none";
z.style.display = "none";
} else {
x.style.display = "none";
y.style.display = "none";
z.style.display = "none";
}
}#contentOne, #contentTwo {
display: none;
} <div style="background-color: #eee; padding: 10px;">
<div id="firstText">
<p>A welcoming text blurb here</p>
</div>
<div id="contentOne">
<p><span style="font-size: 20pt;"><strong><span style="font-family: Helvetica Neue Condensed,Helvetica Neueu,helvetica,sans-serif;">1. Title number one</span></strong></span></p><p>Text blurb of title 1
</p>
</div>
<div id="contentTwo">
<p><span style="font-size: 20pt;"><strong><span style="font-family: Helvetica Neue Condensed,Helvetica Neueu,helvetica,sans-serif;">2. Title number two</span></strong></span></p><p>Text blurb of title 2
</p>
</div>
</div>
<div>
<p><span style="font-size: 20pt;"><strong><span style="font-family: Helvetica Neue Condensed,Helvetica Neueu,helvetica,sans-serif;color: #ccc">Table Of Contents</span></strong></span></p><p>
<a href="#point1" onclick="pointOne()">1. Title 1 to click</a><br><br>
<a href="#point2" onclick="pointTwo()">2. Title 2 to click</a></p>
</div>CodePudding user response：
You could just make a function that works for all points by passing an argument with the element itself.
This should make it much easier to add new elements since you dont have to write any new functions
In the button you can add a data-contentId tag to set the content id and access it in js:
function point(button) {
//var x = document.getElementById("contentOne");
//var y = document.getElementById("firstText");
//var z = document.getElementById("contentTwo");
const content = document.getElementById(button.dataset.contentid);
//console.log(content.style);
const display = getComputedStyle(content)["display"];
const container = button.parentElement.children;
const firstText = document.getElementById("firstText");
let contents
for (let i = 0; i < container.length; i ) {
contents = container[i].dataset.contentid;
if(contents) /*in case its a br element*/ document.getElementById(container[i].dataset.contentid).style.display="none";
}
if(display === "none"){
content.style.display = "block";
firstText.style.display = "none";
}else{
content.style.display = "none";
firstText.style.display = "block";
}
}#contentOne, #contentTwo {
display: none;
}
.content {
display: none;
} <div style="background-color: #eee; padding: 10px;">
<div id="firstText">
<p>A welcoming text blurb here</p>
</div>
<div id="contentOne" class="content">
<p><span style="font-size: 20pt;"><strong><span style="font-family: Helvetica Neue Condensed,Helvetica Neueu,helvetica,sans-serif;">1. Title number one</span></strong></span></p><p>Text blurb of title 1
</p>
</div>
<div id="contentTwo"class="content">
<p><span style="font-size: 20pt;"><strong><span style="font-family: Helvetica Neue Condensed,Helvetica Neueu,helvetica,sans-serif;">2. Title number two</span></strong></span></p><p>Text blurb of title 2
</p>
</div>
<div id="content3"class="content">
<p><span style="font-size: 20pt;"><strong><span style="font-family: Helvetica Neue Condensed,Helvetica Neueu,helvetica,sans-serif;">An example</span></strong></span></p><p>Text blurb of title 3
</p>
</div>
<div id="content4"class="content">
<p><span style="font-size: 20pt;"><strong><span style="font-family: Helvetica Neue Condensed,Helvetica Neueu,helvetica,sans-serif;">It works</span></strong></span></p><p>Yh it does
</p>
</div>
<div id="content5"class="content">
<p><span style="font-size: 20pt;"><strong><span style="font-family: Helvetica Neue Condensed,Helvetica Neueu,helvetica,sans-serif;">Another one</span></strong></span></p><p>Epic
</p>
</div>
<div id="content6"class="content">
<p><span style="font-size: 20pt;"><strong><span style="font-family: Helvetica Neue Condensed,Helvetica Neueu,helvetica,sans-serif;">Its much easier instead of writing separate functiones</span></strong></span></p><p>Ofc it is
</p>
</div>
</div>
<div>
<p><span style="font-size: 20pt;"><strong><span style="font-family: Helvetica Neue Condensed,Helvetica Neueu,helvetica,sans-serif;color: #ccc">Table Of Contents</span></strong></span></p>
<div>
<a data-contentId="contentOne" href="#point1" onclick="point(this)">1. Title 1 to click</a><br><br>
<a data-contentId="contentTwo" href="#point2" onclick="point(this)">2. Title 2 to click</a><br><br>
<a data-contentId="content3" href="#point2" onclick="point(this)">3. Title 2 to click</a><br><br>
<a data-contentId="content4" href="#point2" onclick="point(this)">4. Title 2 to click</a><br><br>
<a data-contentId="content5" href="#point2" onclick="point(this)">5. Title 2 to click</a><br><br>
<a data-contentId="content6" href="#point2" onclick="point(this)">6. Title 2 to click</a>
</div>
</div>CodePudding user response：
If you have to repeat yourself multiple times while coding, its never a good sign.
I am not sure what you intend to do, but if you can, I would suggest to use Bootstrap to make your life a lot easier. Using Bootstrap you could use "Collapse" to achieve your goal. Here's how to do it: Bootstrap Collapse Example
If you are unfamiliar with Bootstrap, you find good help here.
Since you need list-items instead of buttons in the Collapse example, collapse should also work with other html tags than just buttons.
CodePudding user response：
since you haven't posted your complete scenario, there could be a number of solutions. I am posting only one, this code will help you understand how you can make your functions re-useable.
<div>
<p>A welcoming text blurb here</p>
</div>
<div>
<p>
<span style="font-size: 20pt;">
<strong>
<span id="main_content_heading_area"
style="font-family: Helvetica Neue Condensed,Helvetica Neueu,helvetica,sans-serif;">1. Title
number
one</span>
</strong>
</span>
</p>
<p id="blurb_content_heading_area">
Text blurb of title 1
</p>
</div>
</div>
<div>
<p><span style="font-size: 20pt;"><strong><span
style="font-family: Helvetica Neue Condensed,Helvetica Neueu,helvetica,sans-serif;color: #ccc">Table Of
Contents</span></strong></span>
</p>
<p>
<a href="javascript:void();" onclick="toggleContentOnButtonClick('1. Title number one','Text blurb of title 1')">1.
Title 1
to
click</a><br><br>
<a href="javascript:void();" onclick="toggleContentOnButtonClick('2. Title number two','Text blurb of title 2')">2.
Title 2
to click</a>
</p>
</div>
<script>
function toggleContentOnButtonClick(heading, sub_heading) {
document.querySelector("#main_content_heading_area").innerHTML = heading;
document.querySelector("#blurb_content_heading_area").innerHTML = sub_heading;
}
</script>