Click here to Skip to main content
15,611,080 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
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

This is my first question here so that's why I don't know how to attach image with it that's why I would've attached an image with it also.

What I have tried:

From my side I've tried looking for the solution on Google, YouTube, and all other platforms through which I could get a single hint about it, but till now I've not come up with a solution. I've tried changing the coding of the post in theme editor but even there I haven't found the solution.
Updated 4-Nov-22 21:25pm

1 solution

What you are looking for is called Accordion. You can achieve it using HTML, CSS & JavaScript. An accordion menu is a vertically stacked list of various pieces of information.

Create An Accordion
Step 1) Add HTML:
<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum...</p>

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

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum...</p>
Step 2) Add CSS: (Style the accordion)
/* 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;
Step 3) Add 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 */

    /* Toggle between hiding and showing the active panel */
    var panel = this.nextElementSibling;
    if ( === "block") { = "none";
    } else { = "block";
Look here: How To Create an Accordion[^]
Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900