Replacement for Spry Panels

[Arisugawa]

Recently took a new role where one of the sites we manage use spry collapsable panels. I know spry is legacy and unsupported at this point, but I need some way to add/modify these panels as there are no plans to replace or upgrade the site in the near future.

Suggestions?

[Jon Fritz]

Spry was removed from DW back in 2012.

If you still have your activation info from your old software (CS5.5 or 6) you should still be able to activate and use it. Use legacy software for legacy sites that have no updates planned.

In DW CC, there's no interface for working with Spry. You'd have to do it manually, in Code View. There are no plug-ins that I know of to add Spry back to DWCC. Not that it would be a very good idea, Spry wasn't mobile friendly, and the majority of the internet is viewed from mobile devices now.

A final alternative would be to bite the bullet and update the site using current methods, knowing that at some point, those methods may not be current methods either.

[Arisugawa]

>If you still have your activation info from your old software (CS5.5 or 6).
Wasn't my build. I think it was created using CS3, but I have the most current version of DW. I can see the code when I view the page and I can modify the contents of existing panels. But some options, such as whether the panel opens collapsed doesn't appear to be visible to me.  Someone might have a copy of CS3 around, but I'd have to install it and from I understand it's not possible to activate CS3 any longer.

>Not that it would be a very good idea, Spry wasn't mobile friendly, and the majority of the internet is viewed from mobile devices now.

That isn't a concern. The site is internal, meant for PC users and not for mobile users.

>A final alternative would be to bite the bullet and update the site using current methods, knowing that at some point, those methods may not be current methods either.

I'm going to admit some ignorance here - how does one create collapsable panels with current methods?

[Jon Fritz]

CS3 can't be activated any longer, the activation servers have been gone for quite a while now.

I believe the Bootstrap Accordion function would likely do what you need. That's what's now built into DW instead, but your entire page would need to be restructured using the Bootstrap Framework in order to get it going. 

[Arisugawa]

Hmmm, okay. I'm not opposed to reconstructing pages provided the Bootstrap function isn't overly complex. If it behaves similarly for the user (click to open/close information), then that's a viable solution. I'll look into that.

[Nancy OShea]

In order for Bootstrap components to work, you must have a Bootstrap document (relevant versions of CSS & JS files required). 

Dreamweaver only supports Bootstrap up to version 4 which reached End of Life in Jan 2023.  The current version is Bootstrap 5. Manual coding is required.  Or use another code editor alongside Dreamweaver, like Bootstrap Studio or VS Code.

Bootstrap Panels with Collapse class

https://www.w3schools.com/bootstrap5/bootstrap_collapse.php

Working example 

https://www.w3schools.com/bootstrap5/tryit.asp?filename=trybs_collapsible_accordion&stacked=h

Hope that helps.

[Ben M]

What exactly is the site like? Being that it's internal I wouldn't recommend sharing a link publicly, but there may be other alternative options for internal resources that might be better than managing an internal website.

When I hear internal the first thought that comes to mind are the old sharepoint sites which can be replicated on a modern Teams experience if you are in a org using Microsoft. Or there are potentially other alternatives such as Notion that might be an alternative depending on what you need to manage. Especially since this is not a priority for being redone if it cannot be effectively managed then the process itself becomes the cost factor and other alternatives for an internal site should be presented and evaluated.

[Arisugawa]

It's an interactive website, not a document reposititory. I'm not really looking for a way to completely alter the experience the users currently have just to make it more convenient for me.

[Nancy OShea · Accepted solution]

Accordion Panels are fairly simple to construct from plain HTML, CSS and JavaScript. You don't need fancy plugins for this.

https://www.w3schools.com/howto/howto_js_accordion.asp

[Arisugawa]

So Bootstrap is not needed?

[Ben M]

So Bootstrap is not needed?

By @Arisugawa

Bootstrap is simply a framework, a template. With bootstrap you would create your html per their documentation and include the files of bootstrap (css/js), apply their styles and classes to your objects and it would look exactly as it does on their documentation and you can customize there like having a starting point. If you don't want to use bootstrap you can simply save your own html/css/js to create the effect. Or you can use the W3 example and then their styling and effects would be your template starting point to customize from if you choose to do so.

[Arisugawa]

this is super helpful. Is their code using the W3 that would tell a button to display open by default?

[Nancy OShea]

Bootstrap is a 1,001 things rolled into a single framework.  Accordion panels are just one small piece of it.

• When you need Responisive Layouts, plus a lot more, use Bootstrap.
• When all you need are panels, do it yourself.

YOU WROTE: " Is there a code that would tell a button to display open by default?"

Change Display from "None" to "Block."

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc; 
}

.panel {
  padding: 0 18px;
  display: block;
  background-color: white;
  overflow: hidden;
}
</style>
</head>
<body>

<h2>Accordion</h2>

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "none") {
      panel.style.display = "block";
    } else {
      panel.style.display = "none";
    }
  });
}
</script>

</body>
</html>

[Arisugawa]

Forgive the follow up question - isn't the place of Display in that portion of the panel code going to tell all panels to display opened? Would I have to set a separate accordion style if I wanted only one of them to display opened?

[Nancy OShea]

Yes x 2.

[Arisugawa]

Thank you. I still have one last thing to investigate on this before I consider this solved, but otherwise, this has been extremely helpful.

[BenPleysier]

This video shows how easy it is to create an accordion when using Wappler.

https://youtu.be/jOQrlDOZo6k?si=MTVFCMezlzD9NnX5

The first part shows the creation of a static 3-panel accordion, the rest shows the cpnversion to a dynamic accoprdion.

[Arisugawa]

Nancy - I'm trying to replicate the use of tabbed panels (not accordion panels). Please forgive my ignorance on this, I'm trying to figure out how to have a link in one tab open a tab on the same page.
In spry, this was onClick="Tabbedpanels1.showPanel(1)"

I'm unsure how to do this with the tabbed panel code. I've tried onClick="tabcontent.showName(Name)" but that doesn't work.

[Nancy OShea]

Accordion/Tabbed panels, a rose by another name.  They're essentially the same thing with slightly different styles.

https://www.w3schools.com/howto/howto_js_full_page_tabs.asp

[Arisugawa]

Nancy - that doesn't answer my concern. I can make the tabs - that part I understand. I'm not sure how to create a link in one within a tab meant to switch the active tab to a different one. I don't want the learner having to scroll up to click one of the tab headers, I'd like them to click an object or text within the tab.

[Arisugawa]

Nevermind, I figured it out. Just needed to use the same onclick code the buttons themselves were using. 

Thanks for your help everyone, I'm able to move forward.

[BenPleysier]

This may help: adobe/Spry: Spry is a JavaScript-based framework that enables the rapid development of Ajax-powered ...

If you want to change as per @Jon Fritz , then Accordion · Bootstrap v5.3