Elegant coding FAQ section

JavaScript
1

Good afteroon,

I have a FAQ section. Each of the question should be opent indepent of each other so at this moment I have a code snippet per FAQ seen below.
Q1: Is there a more elegant way to code this with a loop or something?
Q2: The default state is now to show the awnser. Can I change the default state to closed?

//Onclick - hover effetcs that work on mobile
$('.faq-block .details').hide();

$(".faq-block").click(function() {
  $(this).find('.info').toggle();
  $(this).find('.details').toggle();
})

//FAQ section
function myFAQ1() {
  var x = document.getElementById("faqAwnser1");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
function myFAQ2() {
  var x = document.getElementById("faqAwnser2");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
function myFAQ3() {
  var x = document.getElementById("faqAwnser3");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
function myFAQ4() {
  var x = document.getElementById("faqAwnser4");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
function myFAQ5() {
  var x = document.getElementById("faqAwnser5");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
function myFAQ6() {
  var x = document.getElementById("faqAwnser6");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
function myFAQ7() {
  var x = document.getElementById("faqAwnser7");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

#faqAwnser1{
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: #FF9F1C;
  margin-bottom: 20px;
}

#faqAwnser2{
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: #FF9F1C;
  margin-bottom: 20px;
}

#faqAwnser3{
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: #FF9F1C;
  margin-bottom: 20px;
}

#faqAwnser4{
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: #FF9F1C;
  margin-bottom: 20px;
}

#faqAwnser5{
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: #FF9F1C;
  margin-bottom: 20px;
}

#faqAwnser6{
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: #FF9F1C;
  margin-bottom: 20px;
}

#faqAwnser7{
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: #FF9F1C;
  margin-bottom: 20px;
}

<!-- FAQ section -->
            <div class="faq">

                    <h1 id="faq"> FAQ's</h1>

                    <button class="faq-button" onclick="myFAQ1()"><h2>What are LAZY SLOTH NFTs?</h2></button>
                    <div id="faqAwnser1">
                      <h2>A LAZY SLOTH NFT is a digital artwork you can collect. <br/>
                        LS-NFTS can be staked to vote and to receive a royalties from the LAZY-fund.</h2>
                    </div>

                    <button class="faq-button" onclick="myFAQ2()"><h2>What is the TREEHOUSE-fund?</h2></button>
                    <div id="faqAwnser2">
                      <h2>The LAZY SLOTH DAO holds two funds: <br/>
                        1. TREEHOUSE-fund, to support sustainability initiatives. And <br/>
                        2. LAZY-fund, to hold and payout royalties to our eligible LS-NFT-holders.</h2>
                    </div>

                    <button class="faq-button" onclick="myFAQ3()"><h2>Are LAZY SLOTH NFTs a good investment?</h2></button>
                    <div id="faqAwnser3">
                      <h2>A lot of NFT projects slowly fade out after the secundairy market, <br/>
                        becasue there is no resaon to own it other than the artwork itself. <br/>
                        LAZY SLOTH NFTs gives you ownership of a streetwear-label. Long after the minting we will design,<br/>
                         marker and sell streetwear. We believe this will continue to fuel demand for the NFT.</h2>
                    </div>

                    <button class="faq-button" onclick="myFAQ4()"><h2>Where are the NFT's stored?</h2></button>
                    <div id="faqAwnser4">
                      <h2>LAZY SLOTH digital artwork is stored on the IPFS.</h2>
                    </div>

                    <button class="faq-button" onclick="myFAQ5()"><h2>How much does a LAZY SLOTH cost?</h2></button>
                    <div id="faqAwnser5">
                      <h2>Mint 1 LS-NFT for 0.04ETH<br/>
                      Mint a duo for 0.06ETH (0.03ETH per each LS-NFT)<br/>
                      Mint a pack of Sloths for 0.1ETH (0.02ETH per each LS-NFT)</h2>
                    </div>

                    <button class="faq-button" onclick="myFAQ6()"><h2>What are the project Utilities?</h2></button>
                    <div id="faqAwnser6">
                      <h2>1. Staking to receive royalies on streetwear, secundary market and minting.<br/>
                         2. Voting on the furthering of the project.<br/>
                          3. Burn-2-Print (trade digital art for real life art)<br/>
                           4. Early access to Streetwear.
                      </h2>
                    </div>

                    <button class="faq-button" onclick="myFAQ7()"><h2>I want a LAZY SLOTH, how do I get one?</h2></button>
                    <div id="faqAwnser7">
                      <h2>LAZY SLOTHs can be minted in a single, duo and pack of vife. <br/>
                        The more you mint the more value for money you receive. <br/>
                        After the minting LAZY SLOTHs will be<br/>
                         available on the secundary market like Open Sea.
                       </h2>
                    </div>


              </div>
2

How are all of these myFAQ functions being called?

3

I’ll update the topic and add the html codeblock

4

So my first thought is, rather than having seven separate functions that all do the same thing, I’d create a single function toggleFaq and have it take an id argument.

This way you could use the function in each of your onclick events and pass the id value of the element.

1 Like
5

I was trying something like that but what happened was when I toggle FAQ1 all the other FAQs also responded. Hence me doing 7 copies of the same code.

So what you are saying is

  1. in the HTML change the myFAQ to not have the numbers. So the Java can call all of the FAQ’s but let it differentiate on the div id since those all have a unique id.

Did I understand this correctly?

6

Right. The whole point of functions is that you can pass them arguments.

For example, if I had:

function log1() {
  console.log("one");
}
function log2() {
  console.log("two");
}

I could simplify that with:

function log(msg) {
  console.log(msg);
}

And pass “one” or “two” when I call it.

7

Thanks ill dive into this as this is pretty new to me :laughing: Now I know where to look.

8

You can also look at the click target and use that information to add or remove classes or inline styles as needed. Exactly how you would do it depends on where the listener is attached and the DOM structure. You may have to traverse the DOM a bit from the click target to the element you want to add the styles to. I’m sure if you search for JavaScript accordion code examples you can get some different code to look at.

You might also just use the details element instead.

2 Likes
9

Lol thats even more easy Just HTML I did not know about that one thank you.

10

No problem. HTML does have a few tricks up its sleeves.

2 Likes
11

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.