Home Entrance Everyone Wiki Search Login Register

Welcome, Guest. Please login or register. - Thinking of joining the forum??
April 27, 2024 - @668.62 (what is this?)
Forum activity rating: Four Star Posts: 82/1k.beats Unread Topics | Unread Replies | Own Posts | Own Topics | Random Topic | Recent Posts
News: :ozwomp: Reminder: Forum messages stay readable for years! Keep yours high quality! :ozwomp:

+  MelonLand Forum
|-+  World Wild Web
| |-+  ✁ ∙ Web Crafting
| | |-+  ☔︎ ∙ I need Help!
| | | |-+  Why isn't my collapsible box code working?

 « previous next »
Pages: [1] Print
Author Topic: Why isn't my collapsible box code working?  (Read 310 times)
SilkSkull
Hero Member ⚓︎
*****


SpaceHey: Friend Me!
iMood: SilkSkull
Matrix: Chat!

View Profile WWW

First 1000 Members!MARIO64.PNGCool Dude AwardJoined 2022!High Speed Ozwomp!
« on: November 07, 2023 @665.34 »
I have this piece of code working on another section of my website to have a collapsible box with text inside but for some reason nothing happens when I click this one

Code
<html>
  <style>
    .collapsible {
    background-color: #e0d6a6;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: center;
    outline: none;
    font-size: 15px;
  }
  
  /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
  .active, .collapsible:hover {
    background-color: #ccc;
  }
    
  /* Style the collapsible content. Note: hidden by default */
  .content {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    background-color: #f1f1f1;
  }
  .h1 {
  font-size: 40px
      font-family: monospace;
    color: #765694;
}
.center {
  text-align: center;
}
  </style>
<head>
    <title>SilkSkull's Music Lair</title>
</head>
<link rel="stylesheet" href="pages.css">

<body>
<div id="content-div">
<!--Place your content bellow this line!-->

<h2>SilkSkulls Musical Lair</h2>

<p class="center">
  <button type="button" class="collapsible">My Current Obsession</button>
  <div class="content">
    <p>My biggest musical obesession at the moment is Thrash metal! I've been listening mostly to the
      big 4 but I really like some less mainstream bands too! (S.O.D rules!!!)
    </p>
  </div>
</P>


<!--Place your content above this line!-->
</div>

</body>
<script>
  var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
</script>
</html>
Logged
She/Her
"Will you stop adding lampposts to my games?"
starbreaker
Sr. Member ⚓︎
****


is it any wonder that my mind's on fire?

SpaceHey: Friend Me!

View Profile WWW

First 1000 Members!G4 Club Member!Joined 2023!
« Reply #1 on: November 07, 2023 @701.92 »
Hi. Did you know that the <details> and <summary> elements give you this functionality in plain HTML?
Logged

rock operatic science fantasy and more...
(...all opinions mine unless attributed, and free to a good home...)
SilkSkull
Hero Member ⚓︎
*****


SpaceHey: Friend Me!
iMood: SilkSkull
Matrix: Chat!

View Profile WWW

First 1000 Members!MARIO64.PNGCool Dude AwardJoined 2022!High Speed Ozwomp!
« Reply #2 on: November 07, 2023 @706.88 »
Quote from: starbreaker on November 07, 2023 @701.92
Hi. Did you know that the <details> and <summary> elements give you this functionality in plain HTML?

Oml this makes my life so much easier tysm!!!!!
Logged
She/Her
"Will you stop adding lampposts to my games?"
starbreaker
Sr. Member ⚓︎
****


is it any wonder that my mind's on fire?

SpaceHey: Friend Me!

View Profile WWW

First 1000 Members!G4 Club Member!Joined 2023!
« Reply #3 on: November 07, 2023 @723.94 »
Quote from: SilkSkull on November 07, 2023 @706.88
Oml this makes my life so much easier tysm!!!!!

You're welcome. Have fun!
Logged

rock operatic science fantasy and more...
(...all opinions mine unless attributed, and free to a good home...)
Pages: [1] Print 
« previous next »
 

Vaguely similar topics! (3)

Deltarune Chapter 2 and The Goner Code

Started by DoctorScreechBoard ♖ ∙ Video Games

 Replies: 0
Views: 2557 		Last post December 03, 2021 @256.40
by DoctorScreech
What do you use to code websites?

Started by neoratzBoard ✁ ∙ Web Crafting

 Replies: 62
Views: 5331 		Last post October 29, 2023 @752.06
by wetnoodle
! ( how to get websites working on DSi? )

Started by JackFrostBoard ☔︎ ∙ I need Help!

 Replies: 7
Views: 721 		Last post January 18, 2023 @922.37
by Guest

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021, Simple Machines | Terms and Policies Forum Guide | Rules | RSS | WAP2


MelonLand Badges and Other Melon Sites!

MelonLand Project! Visit the MelonLand Forum! Support the Forum
Visit Melonking.Net! Visit the Gif Gallery! Pixel Sea TamaNOTchi