Merhaba, Js konusunda bilgim yok ve kafam karıştı

Bir el atarsanız çok güzel olur.
Css id ve class girdiğim bir section var, bir de attributes girdiğim section var. Bir section # içinde olan css kodundaki sürekli açık duruyor. Ondan sonra eğer kullanıcı farklı bir class a tıklarsa, Attribus ile css id hangisine eşleşiyorsa o kısım ortaya çıkıyor ve diğer idler kapalı duruyor. Buraya kadar sorun yok.
Ben bunu tek sayfada iki ayrı bölümde yapınca, iki kez css kodu girmek zorunda kalıyorum çünkü sectionlar tamamen birbirinden farklı alanlarda. Bu durumda da hala çalışıyor ama kullanıcı birisine tıklayınca js kodu hepsini kapatıyor. Ve sadece # içindeki kullanılacak css id i açık tutuyor ve diğer bağımsız farklı bölümde olan section'daki verilerde kapanmış oluyor ama ben o bölümde de bir tane id 'nin açık kalmasını istiyorum. Bunu nasıl yaparım.
Aklıma ikinci css kodunda .all-content yerine başka bir girdi yazarak class ı değiştirmek geldi ama js üzerinden bunu nasıl ekleyeceğim bilmiyorum. Şu anda all content hide olarak ekli ekstradan bir tane nasıl eklerim bilmiyorum.
Umarım derdimi anlatabilmişimdir.
Aşağıdaki şekilde bir initial show/hide css var.
[LIST=1][*].all-content{[*] display: none;[*]}[*]#facebook-content{[*] display: block;[*]}[/LIST]Bir adet data attribute var
data-showme|ID-NAME-content
ve son olarak Js var.
[LIST=1][*]<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>[*][*]<script>[*][*]var $ = jQuery[*][*]$(document).ready(function(){[*] $('[data-showme]').on('click', function(){[*] var showme = $(this).attr('data-showme')[*][*] $('.all-content').hide()[*] $('#' + showme).show()[*] })[*]})[*][*]</script>[/LIST]