ProjeXCode Forum: [Request] Download Box Show/Hide

September 11, 2022

Share this Threads

Request dari Enjoe.

Untuk Demo Click DIsini.

Style.css :

.bixbox{overflow:hidden;box-shadow:0 2px 3px rgb(0 0 0 / 10%);color:#ccc;background:#222;border-radius:3px;-webkit-border-radius:3px;margin-bottom:18px;}
.releases{position:relative;display:flex;justify-content:space-between;align-items:baseline;padding:8px 15px;border-bottom:1px solid #312f40;}
.releases h2{color:#fff;font-size:1.1em;line-height:20px;font-weight:500;margin:0;position:relative;}
.mctnx{margin:15px;}
.mctnx .soraddl{overflow:hidden;margin-bottom:5px;}
.mctnx .soraddl .sorattl{background:#dd3333;padding:9px;color:#fff;border-radius:2px;cursor:pointer;}
.mctnx .soraddl .sorattl h3{margin:0;font-size:inherit;font-weight:inherit;display:inline-block;max-width:70%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mctnx .soraddl .sorattl:after{position:relative;top:3px;float:right;content:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1em" color="white" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 20 20"%3E%3Cpath fill="currentColor" d="m14 5l-5 5l5 5l-1 2l-7-7l7-7z"%2F%3E%3C%2Fsvg%3E');}
.mctnx .soraddl .sorattl.active:after{rotate:270deg;}
.mctnx .content{overflow:hidden;max-height:0;transition:max-height .2s ease-out;}
.soraddl .soraurl{border-bottom:1px solid #312f40;padding:4px 0;}
.soraddl.dlone .soraurl{display:flex;flex-wrap:wrap;}
.soraddl.dlone .soraurl .res{background:#dd3333;-webkit-box-flex:0;-ms-flex:0 0 16.66667%;flex:0 0 auto;max-height:27px;padding:4px 7px;color:#fff;font-weight:500;font-size:13px;text-align:center;border-radius:3px;margin:2px 0;margin-right:4px;}
.soraddl.dlone .soraurl .slink{flex-basis:0;-webkit-box-flex:1;flex-grow:1;max-width:100%;padding-left:0;padding-right:15px;}
.soraddl.dlone .soraurl a:nth-child(1):hover{font-weight:400;color:#fff;background:#444!important;}
.soraddl .soraurl a{background:#333;display:inline-block;padding:4px 7px;border-radius:3px;margin:2px;font-size:13px;}

Markup HTML (BAGAN 1) :

<div class="bixbox">
<div class="releases">
<h2>Download Anime Sub Indonesia</h2>
</div>
<div class="mctnx">
<!-- BAGAN 2 -->
</div>
</div>

Markup HTML (BAGAN 2) :

<div class="soraddl dlone">
<div class="sorattl collapsible"><h3>Episode 01</h3></div>
<div class="content" style="">
<!-- BAGAN 3 -->
</div>
</div>

Markup HTML (BAGAN 3) :

<div class="soraurl">
<div class="res">360p</div>
<div class="slink">
<a href="#" target="_blank" rel="nofollow noopener noreferrer">Google Drive</a>
<a href="#" target="_blank" rel="nofollow noopener noreferrer">AceFile</a>
<a href="#" target="_blank" rel="nofollow noopener noreferrer">Racaty</a>
<a href="#" target="_blank" rel="nofollow noopener noreferrer">Mirror</a>
</div>
</div>

Untuk Full Cntohnya seperti ini :

<div class="bixbox">
<div class="releases">
<h2>Download Anime Sub Indonesia</h2>
</div>
<div class="mctnx">
<div class="soraddl dlone">
<div class="sorattl collapsible"><h3>Episode 01</h3></div>
<div class="content" style="">
<div class="soraurl">
<div class="res">360p</div>
<div class="slink">
<a href="#" target="_blank" rel="nofollow noopener noreferrer">Google Drive</a>
<a href="#" target="_blank" rel="nofollow noopener noreferrer">AceFile</a>
<a href="#" target="_blank" rel="nofollow noopener noreferrer">Racaty</a>
<a href="#" target="_blank" rel="nofollow noopener noreferrer">Mirror</a>
</div>
</div>
<div class="soraurl">
<div class="res">480p</div>
<div class="slink">
<a href="#" target="_blank" rel="nofollow noopener noreferrer">Google Drive</a>
<a href="#" target="_blank" rel="nofollow noopener noreferrer">AceFile</a>
<a href="#" target="_blank" rel="nofollow noopener noreferrer">Racaty</a>
<a href="#" target="_blank" rel="nofollow noopener noreferrer">Mirror</a>
</div>
</div>
<div class="soraurl">
<div class="res">720p</div>
<div class="slink">
<a href="#" target="_blank" rel="nofollow noopener noreferrer">Google Drive</a>
<a href="#" target="_blank" rel="nofollow noopener noreferrer">AceFile</a>
<a href="#" target="_blank" rel="nofollow noopener noreferrer">Racaty</a>
<a href="#" target="_blank" rel="nofollow noopener noreferrer">Mirror</a>
</div>
</div>
</div>
</div>
<div class="soraddl dlone">
<div class="sorattl collapsible"><h3>Episode 02</h3></div>
<div class="content" style="">
<div class="soraurl">
<div class="res">360p</div>
<div class="slink">
<a href="#" target="_blank" rel="nofollow noopener noreferrer">Google Drive</a>
<a href="#" target="_blank" rel="nofollow noopener noreferrer">AceFile</a>
<a href="#" target="_blank" rel="nofollow noopener noreferrer">Racaty</a>
<a href="#" target="_blank" rel="nofollow noopener noreferrer">Mirror</a>
</div>
</div>
<div class="soraurl">
<div class="res">480p</div>
<div class="slink">
<a href="#" target="_blank" rel="nofollow noopener noreferrer">Google Drive</a>
<a href="#" target="_blank" rel="nofollow noopener noreferrer">AceFile</a>
<a href="#" target="_blank" rel="nofollow noopener noreferrer">Racaty</a>
<a href="#" target="_blank" rel="nofollow noopener noreferrer">Mirror</a>
</div>
</div>
<div class="soraurl">
<div class="res">720p</div>
<div class="slink">
<a href="#" target="_blank" rel="nofollow noopener noreferrer">Google Drive</a>
<a href="#" target="_blank" rel="nofollow noopener noreferrer">AceFile</a>
<a href="#" target="_blank" rel="nofollow noopener noreferrer">Racaty</a>
<a href="#" target="_blank" rel="nofollow noopener noreferrer">Mirror</a>
</div>
</div>
</div>
</div>
<div class="soraddl dlone">
<div class="sorattl collapsible"><h3>Episode 03</h3></div>
<div class="content" style="">
<div class="soraurl">
<div class="res">360p</div>
<div class="slink">
<a href="#" target="_blank" rel="nofollow noopener noreferrer">Google Drive</a>
<a href="#" target="_blank" rel="nofollow noopener noreferrer">AceFile</a>
<a href="#" target="_blank" rel="nofollow noopener noreferrer">Racaty</a>
<a href="#" target="_blank" rel="nofollow noopener noreferrer">Mirror</a>
</div>
</div>
<div class="soraurl">
<div class="res">480p</div>
<div class="slink">
<a href="#" target="_blank" rel="nofollow noopener noreferrer">Google Drive</a>
<a href="#" target="_blank" rel="nofollow noopener noreferrer">AceFile</a>
<a href="#" target="_blank" rel="nofollow noopener noreferrer">Racaty</a>
<a href="#" target="_blank" rel="nofollow noopener noreferrer">Mirror</a>
</div>
</div>
<div class="soraurl">
<div class="res">720p</div>
<div class="slink">
<a href="#" target="_blank" rel="nofollow noopener noreferrer">Google Drive</a>
<a href="#" target="_blank" rel="nofollow noopener noreferrer">AceFile</a>
<a href="#" target="_blank" rel="nofollow noopener noreferrer">Racaty</a>
<a href="#" target="_blank" rel="nofollow noopener noreferrer">Mirror</a>
</div>
</div>
</div>
</div>
<div class="soraddl dlone">
<div class="sorattl collapsible"><h3>Episode 04</h3></div>
<div class="content" style="">
<div class="soraurl">
<div class="res">360p</div>
<div class="slink">
<a href="#" target="_blank" rel="nofollow noopener noreferrer">Google Drive</a>
<a href="#" target="_blank" rel="nofollow noopener noreferrer">AceFile</a>
<a href="#" target="_blank" rel="nofollow noopener noreferrer">Racaty</a>
<a href="#" target="_blank" rel="nofollow noopener noreferrer">Mirror</a>
</div>
</div>
<div class="soraurl">
<div class="res">480p</div>
<div class="slink">
<a href="#" target="_blank" rel="nofollow noopener noreferrer">Google Drive</a>
<a href="#" target="_blank" rel="nofollow noopener noreferrer">AceFile</a>
<a href="#" target="_blank" rel="nofollow noopener noreferrer">Racaty</a>
<a href="#" target="_blank" rel="nofollow noopener noreferrer">Mirror</a>
</div>
</div>
<div class="soraurl">
<div class="res">720p</div>
<div class="slink">
<a href="#" target="_blank" rel="nofollow noopener noreferrer">Google Drive</a>
<a href="#" target="_blank" rel="nofollow noopener noreferrer">AceFile</a>
<a href="#" target="_blank" rel="nofollow noopener noreferrer">Racaty</a>
<a href="#" target="_blank" rel="nofollow noopener noreferrer">Mirror</a>
</div>
</div>
</div>
</div>
</div>
</div>

Script.js Style 1 :

let hideS = document.querySelectorAll('.soraddl.dlone');
for(let i=0;i<hideS.length;i++){
hideS[i].addEventListener('click',function(){

if(this.children[0].classList.contains('active')){
this.children[0].classList.remove('active');
this.children[1].removeAttribute('style')
}else{
this.children[0].classList.add('active');
this.children[1].setAttribute('style','max-height:113px;')
}

});
}

Script.js Style 2:

document.querySelectorAll('.soraddl.dlone').forEach(function(hideS){
hideS.addEventListener('click',function(){

if(this.children[0].classList.contains('active')){
this.children[0].classList.remove('active');
this.children[1].removeAttribute('style')
}else{
this.children[0].classList.add('active');
this.children[1].setAttribute('style','max-height:113px;')
}

});
});

catatan :

Letakkan Script.js di bawah Structure Markup HTML,jangan diatasnya.

Untuk Maksud Script.js Style itu adalah cara penulisannya kalian tinggal pilih cara mana yg kalian suka.

Enjoe

Status

Sun Sep 11, 02:47:00 PM GMT+9

makasih min

KangBatch

Sat Sep 17, 12:17:00 PM GMT+9

min, kenapa di saya template nama judul dan server link downloadnya gak presisi kaya gini ya? https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzEvMA0qNCQJckZDBV2ycl5-MaSJhqU7A-tofioufd2tRy_SGCgNJdGg_vQPhTGkUWqOXVFQaOsE7Sx6u_-dxN08lByfLmQKpPvKs6gAzCQobS3CVvhQh3eo6rgkN3goE58Ge9pTZTnZNH0IunF7-QDVTwpmmHvtSd7wihGU5_q2684cZSAZiIu84p/s1600/Untitled.png

Kubao

Status

ID

Wed Sep 21, 07:58:00 PM GMT+9

KangBatch said: min, kenapa di saya template nama judul dan server link downloadnya gak presisi kaya gini ya? https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzEvMA0qNCQJckZDBV2ycl5-MaSJhqU7A-tofioufd2tRy_SGCgNJdGg_vQPhTGkUWqOXVFQaOsE7Sx6u_-dxN08lByfLmQKpPvKs6gAzCQobS3CVvhQh3eo6rgkN3goE58Ge9pTZTnZNH0IunF7-QDVTwpmmHvtSd7wihGU5_q2684cZSAZiIu84p/s1600/Untitled.png
itu bentrok ama css bawaan theme mu coba kamu inspect element

KangBatch

Status

ID

Thu Sep 22, 02:09:00 PM GMT+9

Kubao said: itu bentrok ama css bawaan theme mu coba kamu inspect element
kalo dari class css nya gak ada yang bentrok min, yang jadi masalahnya di bagian H3 display:inline-block

Enjoe

Status

ID

Sun Sep 25, 10:20:00 PM GMT+9
cara fix nya : disetiap class yang ada css "display:inline-block" silakan tambahin css "vertical-align:top"

KangBatch

Status

ID

Mon Sep 26, 06:26:00 PM GMT+9

Enjoe said: cara fix nya : disetiap class yang ada css "display:inline-block" silakan tambahin css "vertical-align:top"
fix, makasih bang

Rules Thread You Can See in Here.

Out Of Topics you can Post in Here.

You Can Support me for donation in Here.

Post a Threads

Share:

Similar Threads

CSS Download Box HTML JavaScript Request [Request] Download Box Show/Hide

Title Role Staff

Title Role Senior Member

Title Role Member

Title Role Junior Member

Title Role New Member

Title Badge Moderator

Title Color Moderator

Title Badge Staff

Title Color Staff

Title Badge Member

Title Color Member

Status Info

Status Verified

ADS Title User

Similar Threads