つまり、基本的に、私が取り組んでいるこのサイトがあり、この小さな問題があり、おそらくこれが解決策を得るのに適切な場所であると考えていました.

[ad_1]

Basically, I've tried looking for this solution and nothing is changing I've not come up with a solution and that's why only you coders can help me.

And, it's an informational site only, and there are these rectangular boxes with headings on them, just like a table of contents, and to know more about it you click on the boxes and it opens with the contents.

So, the problem is that I want to have a plus icon on the rectangular box and the minus icon should appear when you close it. I could not find that particular setting in the theme of my site, so I was looking forward to adding the code in a single post in the theme editor

これは私の最初の質問です。そのため、画像を添付する方法がわからないため、画像も添付しました。

私が試したこと：

私の方からは、Google や YouTube など、1 つのヒントを得ることができるすべてのプラットフォームで解決策を探してみましたが、今のところ解決策は思いつきません。テーマエディターで投稿のコーディングを変更しようとしましたが、解決策が見つかりませんでした。

解決策 1

あなたが探しているものは Accordion. を使用してそれを達成できます HTML、 CSS & JavaScript. アコーディオンメニューは、さまざまな情報が縦に積み上げられたリストです。

アコーディオンを作成する
ステップ1） HTML を追加:

HTML

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

ステップ2） CSS を追加: (アコーディオンのスタイルを設定)

CSS

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}

ステップ 3) JavaScript を追加します。

JavaScript

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    /* Toggle between adding and removing the "active" class,
    to highlight the button that controls the panel */
    this.classList.toggle("active");

    /* Toggle between hiding and showing the active panel */
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}