Show and hide two icons by clicking an anchor

Question

It would be possible show and hide two icons by clicking an anchor?? I have a Foundation Accordion and I need that when I click on the tabs (They are anchors) the icon is displayed to disappear and viceversa. I don't know why the browser console tells me 'addEventListener' of null, because the element exist an is an anchor. I would like to do it with javascript but if is not possible I'll use Jquery. This is what I've tried without succes.

<dd class="accordion-navigation">
  <a href="#panel1a" class="tab-table" role="tab" id="panel1a-heading" aria-controls="panel1a" id="first-tab-accordion">Subastas Activas
    <i class="fa fa-chevron-down styled-tab-icon arrow-content-hidden" id="arrow-content-hidden-first"></i>
    <i class="fa fa-chevron-up styled-tab-icon arrow-content-shown" id="arrow-content-shown-first"></i>
  </a>
  // More stuff...
</dd>

This is the css

.arrow-content-hidden {
 }

.arrow-content-shown {
  display: none;
}

This is the js

<script>

function toggle() {
  var arrowTabDown = document.getElementById("arrow-content-hidden-first");
  var arrowTabUp = document.getElementById("arrow-content-shown-first");
  if (arrowTabDown.style["display"] == 'none') {
    arrowTabDown.style["display"] = 'block';
    arrowTabUp.style["display"] = 'none';
  } else {
    arrowTabDown.style["display"] = 'none';
    arrowTabUp.style["display"] = 'block';
  }
};

document.getElementById("first-tab-accordion").addEventListener("click", toggle, false);
</script>

double id for your link (a), your code works fine – Julo0sS Jul 14 '15 at 12:45 — Julo0sS, Jul 14 '15 at 12:45

score 2 · Answer 1 · answered Jul 14 '15 at 12:41

At first :
You have 2 ids for #first-tab-accordion and then you should run script after the tags loaded so this will work :

<dd class="accordion-navigation">
  <a href="#panel1a" class="tab-table" role="tab" aria-controls="panel1a" id="first-tab-accordion">Subastas Activas
  <i class="fa fa-chevron-down styled-tab-icon arrow-content-hidden" id="arrow-content-hidden-first"></i>
  <i class="fa fa-chevron-up styled-tab-icon arrow-content-shown" id="arrow-content-shown-first"></i>
  </a>
</dd>
<script>
function toggle() {
 var arrowTabDown = document.getElementById("arrow-content-hidden-first");
 var arrowTabUp = document.getElementById("arrow-content-shown-first");
 if (arrowTabDown.style["display"] == 'none') {
  arrowTabDown.style["display"] = 'block';
  arrowTabUp.style["display"] = 'none';
 } else {
  arrowTabDown.style["display"] = 'none';
  arrowTabUp.style["display"] = 'block';
 }
};
document.getElementById("first-tab-accordion").addEventListener("click", toggle, false);
</script>

Wow what a mistake...sorry I didn't notice. I'll check better next time. Thanks — David Soler, Jul 14 '15 at 14:36

score 1 · Answer 2 · answered Jul 14 '15 at 12:44

I noticed that your anchor tag has two ID attributes. Once I removed the second ID attribute ("panel1a-heading"), the code worked fine for me. http://jsfiddle.net/h54a425h/1/

<dd class="accordion-navigation">
  <a href="#panel1a" class="tab-table" role="tab" aria-controls="panel1a" id="first-tab-accordion">Subastas Activas
    <i class="fa fa-chevron-down styled-tab-icon arrow-content-hidden" id="arrow-content-hidden-first"></i>
    <i class="fa fa-chevron-up styled-tab-icon arrow-content-shown" id="arrow-content-shown-first"></i>
  </a>
</dd>

Yes, stupid mistake. I didn't notice. Thanks a lot – David Soler Jul 14 '15 at 14:36 — David Soler, Jul 14 '15 at 14:36

Show and hide two icons by clicking an anchor

2 Answers2