Accordion menu with + and - icon to service portal

KARAN24
Tera Contributor

‎05-25-2021 02:23 AM

Hi All,

I  created a widget with the below code, accordion menu with + and - icon for service portal , but it's not working. any ideas how we can add an accordion menu with the icons on the service portal?

 

 

Here is my code

HTML

<button class="accordion">Section 1</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

 

CSS

.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;
.accordion:after {
content: '\02795'; /* Unicode character for "plus" sign (+) */
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}

 

Link Function

function() {
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";
}
});
}
}

 

Here is the output, I am getting,but I need  + and - icon as below

 

Expecting Outputfind_real_file.png

find_real_file.png

 

  Output getting

find_real_file.png

Preview file
4 KB
Preview file
23 KB
Preview file
74 KB
0 Helpfuls
  • 2,074 Views
2 REPLIES 2

Justin77
Mega Guru

‎05-25-2021 01:07 PM

Checkout UI Bootstrap's Accordion: https://angular-ui.github.io/bootstrap/

0 Helpfuls

Upender Kumar
Mega Sage

‎08-06-2021 11:57 AM 

HTML
<div style="width:100%">
  <!-- your widget template -->
  <div class="wrapper center-block">
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
      <div class="panel panel-default" ng-repeat='faq in data.faqList'>
        <div class="panel-heading" role="tab" id="heading{{faq.id}}">
          <h4 class="panel-title">
            <a role="button" data-toggle="collapse" data-parent="#accordion" ng-click='toggle($event,faq.id);' href="" aria-controls="collapse{{faq.id}}">
              {{faq.question}}
            </a>
          </h4>
        </div>
        <div id="collapse{{faq.id}}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading{{faq.id}}">
          <div class="panel-body" ng-bind-html="faq.details">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

 

Client

api.controller=function($scope) {
	/* widget controller */
	var c = this;

/*	$('.panel-collapse').on('show.bs.collapse', function () {
		console.log('Hello')
		//alert(e.target);
		//$(ctrl).siblings('.panel-heading').addClass('active');
	});

	$('.panel-collapse').on('hide.bs.collapse', function (e) {
		console.log('Hello')
		//alert(e.target);
		//	$(this).siblings('.panel-heading').removeClass('active');
	});*/
	$scope.toggle=function(event,id){
		var ele=$('#heading'+id);
			$('#collapse'+id).slideToggle();
			$(ele).toggleClass('active');
	}
};

Server Side
(function() {
	/* populate the 'data' object */
	/* e.g., data.table = $sp.getValue('table'); */
	data.faqList=[];
	var gr=new GlideRecord('u_faq');
	gr.query();
	var i=0;
	while(gr.next()){
		data.faqList.push({id:i,question:gr.u_question+'',details:gr.getDisplayValue('u_faq_details')})
		i++;
	}
})();

 

body{
  padding:50px;
  background:#fff;
}
.wrapper{
  width:100%;
}
@media(max-width:992px){
  .wrapper{
    width:100%;
  } 
}
#accordion {
  .panel-heading {
    padding: 0;
    border:0;
    border-color:#00469f;
  }
  .panel-title{
    background-color:#00469f;

  }
  .collapse{
    display:none;
  }
  .expend{
  
  }
  .panel-title>a, .panel-title>a:active{
    display:block;
    padding:15px;

    color:white;
    font-size:16px;
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:1px;
    word-spacing:3px;
    text-decoration:none;
  }
  .panel-heading  a:before {
    font-family: 'Glyphicons Halflings';
    content: "\e114";
    float: right;
    transition: all 0.5s;
  }
  .panel-heading.active a:before {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
  } 
}

Try above

0 Helpfuls