Dropdown arrow change on click

Code for changing the dropdown arrow on click.

You can change the arrow from + to –

You can change the symbols you want.[up-down,plus-minus etc].

Javascript code:

function changeText(idElement) {
    var element = document.getElementById('element' + idElement);
    if (idElement === 1 || idElement === 2 ) {
        if (element.innerHTML === '+') element.innerHTML = ' -';
        else {
            element.innerHTML = '+';
        }
    }
}

Following is the PHP code:

<ul>
<?php 
$i=1;
foreach($products as $key => $value) { ?>
<li>
<div style="display: inline-block;" onClick="javascript:changeText(<?php echo($i);?>)"><?php echo $value['groupName']; ?>
</div>
<b style="float:right"><font color="#FFFFFF" id="element<?php echo($i);?>" onClick="javascript:changeText(<?php echo($i);?>)">
+
</font>
</b>
</li>
<?
}
?>
</ul>

2 thoughts on “Dropdown arrow change on click

  1. Pingback: AutoCAD Discount

Leave a Reply