Tidak dapat menavigasi konten sidebar saat saya menggunakan iframe untuk masing-masing konten

Jadi saya memiliki halaman saya dengan bilah navigasi atas, bilah samping, dan konten di sebelah kanan. Sekarang halaman saya sudah dirancang, tetapi saya merasa itu berulang, jadi saya mencoba mengerjakannya dengan iframe di sisi kanan (yang berubah ketika ada tautan di sidebar yang diubah). Saya harap Anda mendapatkan idenya.

Sekarang, masalahnya adalah saya dapat menavigasi ke tag iframe kedua dari tag pertama tetapi tidak dari iframe kedua ke pertama.

Ini kodenya. HTML:

        <div class="container-fluid side-content">

          <iframe src="carsx-iframe.html" id="car-frame" height="100%" width="100%" style="outline: none; border:none; "></iframe>

          <iframe src="edit-profile-iframe.html" id="edit-prof" height="1050px" width="100%" style="outline: none; border-style: none;"></iframe>

        </div>

Js:

$(document).ready(function() {
  $("#edit-prof-click").click(function() {
    $("#edit-prof").show();
  });
});

 $(document).ready(function() {
  $("#cars").click(function() {
    $("#car-frame").show();
  });
});

CSS

#edit-prof{
  display: none;
}

#car-frame{
  display: none;
}