0

Sorry in advance if this is a stupid question but I've been trying a load of different things and nothing is quiet right. I'm also relatively new to all of this and working off someone else' code.

I'm trying to make the whole panel clickable and not just the text for an accordion.

This is the code.

<div uib-accordion-group is-open="topic6.open">
    <uib-accordion-heading>
        <strong>
            <span id="help" style="font-size:16px;text-decoration:none;cursor:pointer;)" translate="help">
                <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-up': topic6.open, 'glyphicon-chevron-down': !topic6.open}"  style="font-size:21px;"></i>
            </span>
        </strong>
    </uib-accordion-heading>
    <span translate="help_aboutmessage1"></span>
    <br>
</div>

And this is what it looks like. As you can see all that is clickable at the moment is the "help" text.

enter image description here

James Whiteley
  • 3,363
  • 1
  • 19
  • 46
John O C
  • 11
  • 5

1 Answers1

0

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

.active, .accordion:hover {
    background-color: #ccc; 
}

.panel {
    padding: 0 18px;
    display: none;
    background-color: white;
    overflow: hidden;
}
</style>
</head>
<body>

<h2>Accordion</h2>

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Panel #1</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Panel #2.</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Panel #3</p>
</div>

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

for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
    });
}
</script>

</body>
</html>

by the way, i just copied this code from W3schools, so dont give me any credit

Virtual Ghost
  • 3
  • 6