0

I have this code:

<ul>
    <li>
        <a href="#" id="fiatClick">Fiat</a>
    </li>
    <li>
        <a href="#" id="audiClick">Audi</a>
    </li>
</ul>

<div id="showCarInfo"></div>

And when a link is clicked, the proper content related to that link should be appended inside id="showCarInfo".

As of now, with each click a new set of content is being generated instead of the content being swapped. How do I replace (toggle) the content inside the div with each click? I am using W3.JS to include HTML files in my HTML and this is my JS:

$('#fiatClick').click(function(e) {
        e.preventDefault();
        $('#showCarInfo').append('<div w3-include-html="fiat.html"></div>');
        w3.includeHTML();
    });
    $('#audiClick').click(function(e) {
        e.preventDefault();
        $('#showCarInfo').append('<div w3-include-html="audi.html"></div>').show();
        w3.includeHTML();
    });
hnnnng
  • 481
  • 4
  • 21

1 Answers1

1

Could you change .append() to .html()?

Woobie
  • 95
  • 7