Skip to main content
Kathryn - Pasadena CA
Kathryn - Pasadena CA
Known Participant
May 23, 2025
Question

Collapse a headline?

  • May 23, 2025
  • 2 replies
  • 3045 views

I have this page I'm working on: https://www.bassett.net/pages/david.shtml - yes I know I need to redo my website to make it responsive, but no time at preset. What I want to do, is to have the items under each headline be collapsd unless they click on a plus or arrow to open the content.

 

Example of what I have in mind: https://liquiddeath.com/pages/faq

 

I tried following along https://www.youtube.com/watch?v=Zgqbbg3EW7Q, that uses https://www.w3schools.com/howto/howto_js_accordion.asp, but had issues on exactly where the segments of code would go, in relation to the code already there.

 

Is it even possible when using a page with shtml? I have a vague memory from year ago that there was a way to have my interior part of the page pull in an htm, but I'm not sure if it's my imagination or not. I WAS able to make an htm/html that worked from the YouTube.

 

I'm using Dreamweaver 21.4 and Windows 10.

2 replies

Kathryn - Pasadena CA
Kathryn - Pasadena CAAuthor
Known Participant
May 23, 2025

I'm satified now with https://www.bassett.net/pages/AccordianSample.html

So the remaining question is why isn't  https://www.bassett.net/pages/david2.shtml  full width of the white area? Hopefully, I figure it out while waiting for a response, but... just in case.

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
May 23, 2025

Your Accordion Panel is 100% width.

.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 20px;
transition: 0.4s;

}

 

When Accordions are placed inside other containers, they are constrained to the maximum width of the parent element, whatever that may be -- 25%, 50% or 75% of screen width.

 

 

Nancy O'Shea— Product User & Community Expert
    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    May 23, 2025

    You placed your Accordion panel inside a floated <div> that's only 500px wide.  Remove the float and width.

    #left {
    float: left;
    width: 500px;
    margin-left: 50px;
    margin-right: 0%;
    }

     

    Nancy O'Shea— Product User & Community Expert
    Kathryn - Pasadena CA
    Kathryn - Pasadena CAAuthor
    Known Participant
    May 23, 2025

    Hmm, I figured out the include, I knew I'd used it before - it's in the sidebar. So, since posting original post, I've now included https://www.bassett.net/pages/AccordianSample.html

     

    When pulling that page up in browser, the content uses the whole width. But when including it in https://www.bassett.net/pages/david2.shtml, it only uses about 25% of the available width. Why is that?

     

    While waiting for an answer, I'll experiment on adding an image like a plus sign.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices