gizlenmiş içeriği açma - kapatma
Merhaba arkadaşlar, örnek sayfadaki kodlarımda hangi "Detay..." yazısına tıklanırsa altındaki gizlenmiş "detayicerik" classına sahip div'in javascript yada css ile açılmasını istiyorum. beceremediğim için yardımınızı rica ediyorum. şimdiden teşekkür ederim...
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (10)
Merhaba arkadaşlar, öncelikle Ramazan bayramınızı tebrik ediyor ve verdiğiniz cevaplar için çok teşekkür ediyorum.
aradığım olay tam olarak BURADAKİ örnekteki gibi birşey. buradaki örnekte yorumlar listelenmiş ve her yorumun altında yanıtla linki var. hangi yorumun yanıtla linkine tıklanırsa o yorumun altında cevap yazılabilecek bir alan açılıyor. başka bir yorumun yanıtla linkine tıklandığında ise daha önce tıklanan yanıtla linkinin cevap yazma alanı gizleniyor. bazı arkadaşlar accordion tavsiye etmiş ama accordion ile yapılabileceğini sanmıyorum.
div
span class"open"
div
div
gizli içerik
div
const open = ducument.querySellectorAll(".open")
for(let i = 0; i < open.length; i++)
{
let parentel = open[i].target.parentElement;
parentel.nextElement.toogle(".show");
}
eğer tıklanı ca açık olanlar kapansın istiyorsan
bu iki divi saracak bir div koy her tıklamada gizli divi açtırmadan önce bu dive bir class ata
.sarandiv .hideshowdiv {display none }
telden bukadar
mobilde örnek sayfa kodların düzgün görünmüyor bakamadım ama sanırım istediğin şey bu bootstrap accordion-flush olabilir mi?
Merhaba "dostum" soruma verdiğin cevap ve gösterdiğin çaba için teşekkür ederim. Yaptığın freelance işte yaşadığın sorun için de üzgünüm. Ancak orada yaşadığın sorunu buraya yansıtmana ve bu kadar tepki vermene bir anlam veremedim. Sonuçta istemezsen burada sorulan sorulara cevap yazmayabilirsin. En nihayetinde bu işeri sürekli yapan ve bu işlerden para kazanan biri değilim. Fırsat buldukça bir şeyler öğrenip uygulamaya farklı şeyler yapmaya çalışıyorum. Sana göre yazdığın cevap doğru olabilir ama olmasını istediğim şey tam olarak bu değil. O yüzden tekrar soru sorma ihtiyacı duydum.
Yardımcı olabileceksen yeniden sorayım. 😊
1 - tüm konu içeriklerinin gizli olması gerekiyor.
2 - hangi “Detay” başlığına tıklanırsa o konunun detayı görünecek.
3 - açık olan konu detayına tıklandığına ilgili konu detayı kapanacak.
https://getbootstrap.com/docs/5.1/components/accordion/
bunu modifiye edebilirsin.
dostum ilk cevap doğru yanıttı, üstelik opsiyonel kullanıma uygun bir yanıt verdim. daha sonra rica ettin, istediğini yaptım. ne istediğini bilmeyecek kadar fikir sahibi değilsen, kırıcı olmak istemem ama suyunu çıkartma. şuan çalışan hali senin tanımını yaptığın hali. üstelik tüm methodları kısa da olsa tek tek izah ettim. durup üzerine düşünürsen, javascripti hiç bilmiyorsan bile istediğini yapabilirsin çünkü çok bir şey gerekmiyor ve gerekenleri gösterip nasıl çalıştıklarını yazdım. balığı, oltasıyla, iğnesiyle ve yemiyle verdim. kusra bakma uzattığım için, bu konuda biraz hassiyetim var. küçük kazançlı freelance işler yapardım, bu tavırlardan dolayı bıraktım. en son bir bot yazdım, ödemeyi 1 hafta geç yaptılar, teslim ettiğimde program versiyon yükseltmişti, sonra oturup bir daha yaptım yapmam gerekmiyordu ama. ertesi gün ekstra bir şey istediler kıramadım yaptım. sonraki gün yine yeni bir istek. kardeş dedim sen al paranı, kodlarda sende kalsın. senin yaptığın da aynısı yani şuan.
hocam şöyle ki tıklanıp aktif hale getirilen içerik açık kalıyor :( yani tam olarak düşündüğüm şey şu tüm konuların içerik div'i gizli olacak, hangisine tıklanırsa o açılacak geri tıklandığında ya da başka bir detay linkine tıklandığında açık olan kapanacak. umarım kendimi ifade edebilmişimdir.
$('.konuDetay').click(function(){
$('.konu').each(function(){
$(this).find('.detayicerik').hide();
});
$(this).next('.detayicerik').show();
});
diğerinden farklı olarak burada bir elemente ait sınıfı döngüye aldık ve içerisinde detayicerik adındaki sınıfları bulup gizledik. daha sonra sadece tıklananı gösterdik.
$('.konuDetay').click(function(){
$(this).next('.detayicerik').toggle();
})
jquery gerektirir. this tıklanan elemanı alıyor ve aynı derinlikte bulunan ilk detay icerik sınıfını next ile seçiyor toggle ise, display durumu true ise false, false ise true yapıp bir nevi açıyor ve kapıyor.
edit: açıp kapatmak değil, sadece göstermek istiyorsan toggle yerine show yaz.