如何將展開全部按鈕添加到 javascript/HTML 項目

Question

我目前有一個頁面，當您單擊一個術語時，該頁面的內容會擴展，但是一旦您單擊一個新術語，舊術語就會關閉，而新術語會展開。 這些條款是從谷歌表格加載到頁面上的。 這是在 HTML 頁面上，但執行該工作的 javascript 代碼如下：

// Address of the Google Sheets Database
var public_spreadsheet_url = 'sheet link here';

// Column Names from Google Sheets Database
let questionsColumn = "Question";
let answersColumn = "Answer";

window.addEventListener('DOMContentLoaded', init)   // Calls method init when Sheets has loaded

function init() {
Tabletop.init( { key: public_spreadsheet_url,
                 callback: showInfo,
                 simpleSheet: true } );
}

var unhiddenAnswer = "";

// Method that gets called when data has been pulled from Google Sheets
function showInfo(data) {
    var editButton = '<center><a style="border-bottom: none" href="' + public_spreadsheet_url + '"><button class="button admin">Edit</button></a></center>';

    // Injects the built HTML code into the div Dynamic
    document.getElementById("dynamic").innerHTML = buildFAQTable(data) + editButton;
}

// Builds the HTML Table code from the Database Data
function buildFAQTable(data) {
    var index = 0;
    var content = '<h2>Title Here</h2><div style="padding:0px 5%">';
    data.forEach(form => {
        content += '<h1 class="faq_question" onClick="unhideAnswer(' + index + ')">' + data[index][questionsColumn] + '</h1>';
        content += '<p id="answer' + index + '" class="hideAnswer">' + data[index][answersColumn] + '</p>';
        index++;
    });
  // Extends body to accomdate for tall footer on very small devices (e.g. iPhone 5/5S/SE)
  content += "<br></br><br></br>";
    return content;
}

// When a FAQ Question gets clicked on, this method will hide the currently displaying answer (if any), and
// Unhide the answer corresponding to the clicked on answer.
// If the currently displaying answer is the same as the answer corresponding to the clicked on question,
// it will be hidden and no new answer will be unhidden
function unhideAnswer(number) {
    var answerID = "answer" + number;
    if (answerID != unhiddenAnswer) {
        document.getElementById(answerID).classList.remove("hideAnswer");
    }
    if (unhiddenAnswer != "")
        document.getElementById(unhiddenAnswer).classList.add("hideAnswer");
    if (unhiddenAnswer == answerID)
        unhiddenAnswer = ""
    else
        unhiddenAnswer = answerID;
}

我現在想添加一個全部展開/全部折疊按鈕，讓用戶可以選擇在需要時一次性打開和查看所有條款。 但是，如果不使用全部展開按鈕，則應使用上面的常規打開和關閉功能。 我是 javascript 的新手，不知道實現這一點的最佳方法。 任何幫助，將不勝感激。

Answer 1

將答案 class 添加到每個答案，然后您可以使用此查詢選擇器遍歷所有答案

// in your buildFAQTable fucntion
content += '<p id="answer' + index + '" class="hideAnswer answer">' + data[index][answersColumn] + '</p>';


document.querySelectorAll('.answer').forEach(answer => {
  // you can use toggle, add or remove to change the appearance of the answer
  answer.classList.toggle('hideAnswer')
})

我還建議您查看一些較新的 javascript 功能，例如字符串插值並避免使用 var，但如果您剛剛開始，這並不是那么重要。

（我還重構了你的一些代碼，這可能使它更具可讀性）

// Address of the Google Sheets Database
const public_spreadsheet_url = 'sheet link here';

// Column Names from Google Sheets Database
const questionsColumn = "Question";
const answersColumn = "Answer";

function toggleAnswer(num) {
        const answer = document.getElementById(`answer${num}`);
        answer.classList.toggle('hideAnswer');
}

function hideAll() {
        document.querySelectorAll('answer').forEach(answer => {
                answer.classList.add('hideAnswer');
        })
}

function showAll() {
        document.querySelectorAll('answer').forEach(answer => {
                answer.classList.remove('hideAnswer');
        })
}

function buildFAQTable(data) {
        let index = 0;
        let content = '<h2>Title Here</h2><div style="padding:0px 5%">';

        for (i in data) {
                content += `<h1 class="faq_question" onClick="unhideAnswer(${i})">${data[i][questionsColumn]}</h1>`;
                content += `<p id="answer${i}" class="hideAnswer answer">${data[i][answersColumn]}</p>`;
        }

        content += "<br></br><br></br>";
        return content;
}

function showInfo(data) {
        const editButton = `<center><a style="border-bottom: none" href="${public_spreadsheet_url}"><button class="button admin">Edit</button></a></center>`;

        document.getElementById("dynamic").innerHTML = buildFAQTable(data) + editButton;
}

window.addEventListener('DOMContentLoaded', () => {
    Tabletop.init({
        key: public_spreadsheet_url,
        callback: showInfo,
        simpleSheet: true
    });
}, { once: true })