手风琴列表的加号/减号图片

Question

The code below is for an accordion list I have created using HTML, CSS and JavaScript. Is there any way add a plus and minus picture in the left corner of the heading? So when I clicked on heading "A" or "B" the picture goes from the plus sign to the minus sign. Here are the two images I would like to use:

https://www.independencecenter.org/wp-content/uploads/2014/04/wellness.png

https://web.archive.org/web/20150227045704/http://licensing.paperbagrecords.com/wp-content/themes/licensing/assets/images/minus.png

 (function () { var accordions, i; // Make sure the browser supports what we are about to do. if (!document.querySelectorAll || !document.body.classList) return; // Using a function helps isolate each accordion from the others function makeAccordion(accordion) { var targets, currentTarget, i; targets = accordion.querySelectorAll('.accordion > * >h1 '); for(i = 0; i < targets.length; i++) { targets[i].addEventListener('click', function (e) { /*Added the code below*/ if (e.target.parentNode.classList.contains("expanded")) { e.target.parentNode.classList.remove("expanded") } else { /*Else do the following, same as before */ if (currentTarget) currentTarget.classList.remove('expanded'); currentTarget = this.parentNode; currentTarget.classList.add('expanded'); } }, false); } accordion.classList.add('js'); } // Find all the accordions to enable accordions = document.querySelectorAll('.accordion'); console.log(accordions); // Array functions don't apply well to NodeLists for(i = 0; i < accordions.length; i++) { makeAccordion(accordions[i]); } })();

 <style> /*All paragraphs*/ .p { margin: 5px; color: #007a5e; } .bold { color: #007a5e; font-weight:bold; } .boldwhite { font-weight:bold; } /*Accordion Movement*/ .accordion.js > * { overflow: hidden; } .accordion.js > *:not(.expanded) > *:not(h1) { max-height: 0; margin-top: 0; margin-bottom: 0; opacity: 0; visibility: hidden; overflow: hidden; } .accordion.js > .expanded > *:not(h1) { opacity: 1; visibility: visible; } .accordion.js > * > h1 { cursor: pointer; visibility: visible; } .accordion.js > * > *:not(h1) { transition: max-height 0.5s, visibility 0.5s, margin 0.5s, opacity 0.5s; } /*Section Properties*/ .sections { font-family: Verdana; font-weight: lighter; color: #5E5E5E; text-align: center; border-style: solid; border-width: 1px; border-color: #dddddd; padding: 5px; background-color: #FCFCFC; border-radius: 1px; } .sections:hover { box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } /*Green Section Properties*/ .sections2 { font-family: Verdana; font-weight: lighter; color: #5E5E5E; text-align: center; border-style: solid; border-width: 1px; border-color: #ccd6e0; padding: 5px; background-color:rgba(224, 235, 245,0.3); border-radius: 1px; } .sections2:hover { box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .accordion > section > div { margin-bottom: 15px; } </style>

 <section class="accordion js"> <section class="sections"> <h1><span style="font-size: 18px;">A</span></h1> <div> <p class="p" style="text-align: center;"><span style="color: #007a5e;">aerheahqeh.</span></p> </div> </section> <br style="line-height: 15px;"/> <section class="sections2"> <h1><span style="font-size: 18px;">B</span></h1> <div> <p class="p" style="text-align: center;">Twtjwrjwrj </p> </div> </section> </section>

Answer 1

Use pseudo-elements on the child of your expanded class and a background image. Something like:

.accordion.js h1{
    position:relative;
}
.accordion.js h1::before{
    content: "";
    display:block;
    height:20px;
    width:20px;
    position:absolute;
    left:0;
    top:0;
    background: url(YourPlusImageUrlHere);
}
.accordion.js .expanded h1::before{
    background: url(YourMinusImageUrlHere);
}

Adjust for your styles.