Accordion Editing

[Ohhcoconut]

Hello,

I have been working on this dropdown accordion to host an unorderd list of our customers by market. I've gotten it pretty close to where I need but my issue is that I cannot get the overflow setting to scroll and the display to be a drop down clickable display. What I want is the accordion to be a button with a drop down menu with a scrolling sidebar. I will attach my custom HTML code below: 

<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-1">
Phoenix Participants List

</a>

<div id="accordion-1" class="accordion-section-content">

<p>
<ul>Ak-Chin Southern Dunes</ul>
<ul>Antelope Hills- North</ul>
<ul>Antelope Hills- South</ul>
<ul>Arizona Grand Resort</ul>
<ul>ASU Karsten</ul>
<ul>Augusta Ranch</ul>
<ul>Camelback- Ambiante</ul>
<ul>Camelback- Padre</ul>
<ul>Coldwater Golf Club</ul>
<ul>Continental Golf Club</ul>
<ul>Continental Country Club</ul>
<ul>Copper Canyon Golf Club</ul>
<ul>Coyote Lakes Golf Club</ul>
<ul>Eagle Mountain</ul>
<ul>Golf Club at Estrella</ul>
<ul>Grayhawk Golf Club- Raptor</ul>
<ul>Grayhawk Golf Club- Talon</ul>
<ul>Kokopelli</ul>
<ul>Legend at Arrowhead</ul>
<ul>Lone Tree Golf Club</ul>
<ul>Longbow Golf Club</ul>
<ul>Lookout Mountain Golf Club</ul>
<ul>McDowell Mountain Golf Club</ul>
<ul>Palm Valley Golf Course-Lake</ul>
<ul>Papago Golf Course</ul>
<ul>Poston Butte Golf Club</ul>
<ul>Quintero Golf Club</ul>
<ul>Raven Golf Club- Phoenix</ul>
<ul>San Marcos Golf Resort</ul>
<ul>Scottsdale Silverado</ul>
<ul>Sedona Golf Resort</ul>
<ul>Starfire Golf Club</ul>
<ul>Stonecreek Golf Club</ul>
<ul>Sunland Springs Village</ul>
<ul>Superstition Springs Village</ul>
<ul>Superstition Springs Golf Club</ul>
<ul>Talking Stick- North</ul>
<ul>Talking Stick- South</ul>
<ul>The Phoenician</ul>
<ul>The Westin Kierland Resort</ul>
<ul>TPC® Scottsdale- Champions</ul>
<ul>TPC® Scottsdale- Stadium</ul>
<ul>Trilogy at Vistancia</ul>
<ul>Troon North- Monument</ul>
<ul>Troon North- Pinnacle</ul>
<ul>Verrado Golf Club</ul>
<ul>We Ko Pa- Cholla</ul>
<ul>We Ko Pa- Saguaro</ul>
<ul>Whirlwind- Cattail</ul>
<ul>Whirlwind- Devil's Claw</ul>
<ul>JW Marriott® Wildfire- Faldo</ul>
<ul>JW Marriott® Wildfire- Palmer</ul>
<ul>The Classic Club</ul>
</p>

</div><!--end .accordion-section-content-->
</div><!--end .accordion-section-->
</div><!--end .accordion-->

This is my CSS Styling for the accordion: 

.accordion, .accordion * {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}

.accordion {

/*box-shadow:0px 1px 3px rgba(0,0,0,0.25); Comment out by HS support 4/13/17 */
border-radius:3px;
background:#ffffff;
position: absolute;
}

/*----- Section Titles -----*/
.accordion-section-title {
width:100%;
padding:5px;
display:inline-block;
border-radius:15px 15px 15px 15px; /*15px 15px 15px 15px; HS SUPPORT*/
border-bottom:1px solid #1a1a1a;
background:#29cdcb;
transition:all linear 0.15s;
/* Type */
font-size:1.200em;
font-weight:bold;
text-align: center;
text-shadow:0px 1px 0px #1a1a1a;
color:#fff;
text-decoration:none;
}

.accordion-section-title.active, .accordion-section-title:hover {
background:#800000;
color:#fff;
/* Type */
text-decoration:none;
}

.accordion-section:last-child .accordion-section-title {
border-bottom-color:white;
padding-bottom:2px;
}

/*----- Section Content -----*/
.accordion-section-content {
height: 500px;
overflow: scroll;
padding: 0px;
display: block;
}

The only time I can get the accordion-content to not display when you load the page is to have the display set to none, but then the overflow property becomes null. 

Any help would be great... Thank you!

[Ty]

Hi @Ohhcoconut

So i took a look into your code and noticed a few things, you are trying to create a list with the wrong element tag. Then your result of how the list displayed was solely on whether the <p> is being rendered as a block element (creates each item on a new line) or an inline element (creates all the items on the same line).

The basic change I made to your code was to follow the webstandard for creating lists, which would be:

<!-- create list container, ul stands for "unordered list" so this will be a bullet list -->
<ul>
<!-- Create first list item, li stands for "list item", which is 1 item in your list of "Phoenix Participants List" -->
<li>List item 1</li>
<li>List item 2</li>
<li>List item 2</li>
</ul>

Lists will display as bullets by default, but you can remove them by accessing the list-style and setting it to "none." Here is a JSFiddle with a working example for you. I added the section to remove the bullts and commented above it, so if you want different list styles, you can update it there. There are many types so I recommend checking out the docs for the different list styles.

Hope this helps you out, let me know if there's anything else I can help with!

-- Ty

[Ohhcoconut]

Thanks for your help Ty!

I'm still having issues on my website with your new code. I've actually been fiddling with JSFiddle too, check out my code with the entire css website styling here. Notice how the drop down content doesn't load? I've been majorly having issues finding code to communicate with JSFlipper and Hubspot, it's tough when I have the bare basics of understanding in code and I'm primarily using w3schools.com to help me. 

I'm still having issues with this formatting on the website, see the photo attached above. Still no scrolling option on the drop down menu.  Ignore the weird white box with Greg Avant in it, it's the next obstacle to tackle, haha. 

Any ideas what is causing this?

Thank you!

-Colleen

[Ty · Accepted solution]

Hi @Ohhcoconut,

So two issues with your fiddle, on JS Fiddle, you need to tell it that you want to include jQuery, which can be done line this

I tend to use jQuery 1.9, because the lowest version HubSpot supports is 1.7 and the highest is 1.11x, which gives me a good middle ground. Additionally, even if you brought all the css over, you still need to bring the script that is handling your click function as well. Which is this snippet:

$(document).ready(function() {
  function close_accordion_section() {
    $('.accordion .accordion-section-title').removeClass('active');
    $('.accordion .accordion-section-content').slideUp(300).removeClass('open');
  }
  $('.accordion-section-title').click(function(e) {
    // Grab current anchor value
    var currentAttrValue = $(this).attr('href');
    if ($(e.target).is('.active')) {
      close_accordion_section();
    } else {
      close_accordion_section();
      // Add active class to section title
      $(this).addClass('active');
      // Open up the hidden content panel
      $('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
    }
    e.preventDefault();
  });
});

So now that JSFiddle know you want to use jQuery and the browser has a list of instructions (the script), it will be able to carryout those commands when the command '.click()' is performed. As you can see in your updated fiddle. 

---------

For your website, if you take a look at your code, you will see that the accordion is being set to "overflow: hidden", which to think in a non-code ethic, is to essentially 'crop' the information. What you want to do is tell your computer to make it scroll.

So what you should do is find the section of CSS that looks like this:

.accordion-section-content {
    height: 500px;
    overflow: scroll;
    padding: 0;
    display: none;
}

and change it to

.accordion-section-content {
    height: 500px;
    /* Y axis is scrollable */
    overflow-y: scroll !important;
   /* X axis is cropped */
    overflow-x: hidden;
    padding: 0;
    display: none;
}

Using "!important" will make this style take priority. Since the overflow hidden class is being inherited from another part of your code, persumably the nav, this will be the easiest way to section them out.

Try this snippet out and let me know how it goes!

-- Ty

[Ohhcoconut]

Thank you Ty!!! You're wonderful. Thank you for helping me understand this. One little clarifying point, the JS script you've added to the JSFiddle, where did you find that code? 

[Ty]

Hey @Ohhcoconut,

I found it on your template, you have a custom HTML module here:

I would recommend creating a custom JS file to hold this script and linking to it in the head of your template, this will altogether make the set up a tad cleaner. But I've also run templates with inlinescript when I needed to beat loading issues, it's all up to you though!

-- Ty