bits: Dynamisches <a> element erstellen mit # innerhalb der href Anweisung

Beitrag lesen

Hallo

Ich habe ein Problem bei der dynamischen Erstellung von accordions. Ich habe mir folgende Funktion erstellt, welche dem div "accordion-section" ein weiteres accordion element hinzufügen soll. Das funktioniert auch soweit. Jedoch will die verlinkung mit dem accordion content einfach nicht funktionieren. Statisch ist es kein Problem (Siehe code weiter unten). Durch lange tests vermute ich das die href anweisung ein problem macht. Das Problem tacht nur beim setzen des href attributs mittels javascript auf. Kann es sein das Javascript mit der Raute innerhalb der href Anweisung nicht zurecht kommt. Ich habe es auch schon mit %23 anstatt die # versucht. Dies führt jedoch auch nicht zum gewünschten ergebnis.

function dynamicAccordion(){	
  var a = document.createElement("a");
  a.className = "accordion-section-title";
  a.href = "#accordion-20";
  a.innerHTML = "Inhalt 1";			
  document.getElementById("accordionSection").appendChild(a);	
  var div = document.createElement("div");
  div.className = "accordion-section-content";
  div.id = "accordion-20";
  var p = document.createElement("p");
  p.innerHTML = "Content";
  div.appendChild(p);
  document.getElementById("accordionSection").appendChild(div);	
}
<a class="accordion-section-title" href="#accordion-20" Inhalt 1></a>											
<div id="accordion-20" class="accordion-section-content">					 
  <p>Content</p>
</div>

Der JavaScript code für die Accordions sieht wie folgt aus. Dieser funktioniert jedoch sehr gut solange ich alle Elemente statisch erzeuge.

$('.accordion-section-title').click(function(e) {
  // Grab current anchor value
  $('.accordion input[type="checkbox"]').click(function(e) {
  e.stopPropagation();
});
		
var currentAttrValue = $(this).attr('href');
if ($(e.target).is('.active')) {
  close_accordion_section();
} else {
  close_accordion_section();
  // Add active class to section title
  $(this).addClass('active');
  // Open up the hidden content panel
  $('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
}
  e.preventDefault();
});