ACCORDION CODEs

Welcome to the accordion tutorial for RES4's website!

Below are all of the different types of Accordion <code> used on the project pages

OUR BASIC CODE STRUCTURE:

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<button class="accordion"><b>INSERT TITLE HERE</b></button>
<div class="panel">

<p>
ACCORDION CONTENT (i.e. gallery, video, text, etc.)
</p>

</body>

</html>

You're probably wondering: WHAT IS THIS!!??
Well don't worry as this tutorial will breakdown the various elements found in this code!

There are 3 basic languages that are used in this code: HTML, CSS & JAVASCRIPT

Here's a basic breakdown of how HTML, CSS, & JAVASCRIPT work in conjunction with one another!

HTML: Creates the page "Content"
CSS: Specifies the "Style" of the Page (i.e Appearance and Format).
JAVASCRIPT: Allows for actions to occur on page "Animations" and Behaviors.

Now to discuss how these elements appear in an HTML document!

1. HTML is normally structured as follows:

HTML opens with <html> and closes with </html>
HTML content opens with <head> and closes with </head> and/or <body> and closes with </body>

BASIC EXAMPLE:

<!DOCTYPE html>
<html>

<head>
<body>
The content of the body element is displayed in your browser.
</body>
</head>

</html>

The reason why there is the heading <!DOCTYPE html>, is because the code is telling the browser: "the following code will be written in HTML" and therefore will be cross-compatible across multiple viewing platforms! You only need it once!

2. CSS is normally structured as follows:

CSS opens with <style> and closes with </style>
CSS modifies content appearance, elements like: background color, text color, font size, font type, alignment, etc.

EXAMPLE:

<!DOCTYPE html>

<html>
<head>
<style>
button.accordion {
background-color: #ffffff;
color: #444;
cursor: pointer;
padding: 30px;
width: 100%;
border-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
text-align: left;
outline: none;
font-size: 13px;
font-family: Muli;
letter-spacing: 1.5px;
transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
color: #999999 ;
}

button.accordion:after {
content: "\25B9";
font-family: "Times New Roman";
font-style: normal;
font-size: 15px;
color: #777;
float: right;
margin-left: 5px;
margin-bottom: relative;
}

button.accordion.active:after {
content: "\25BF";
font-family: "Times New Roman";
font-style: normal;
}

div.panel {
padding: 0 18px;
background-color: #ffffff;
max-height: 0;
overflow: hidden;
transition: 0.6s ease-in-out;
opacity: 0;
}

div.panel.show {
color: #444;
opacity: 1;
max-height: 2000px;
}

.divider {
width: 100%;
margin: 0 px;
border-width: 1px;
border-top-style: solid;
border-top-color: #b3b3b3;
padding-top: 0px;
padding-bottom: 0px;
}
</style>
</head>
<body>

JAVASCRIPT is normally structured as follows:

JAVASCRIPT opens with <script> and closes with </script>
JAVASCRIPT modifies content behavior, elements like: animation, show/hide items, etc.

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

for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
</script>

ACCORDION BODY CONTAINER TYPES

Located off the coast of Connecticut and Rhode Island, yet occupying a body of water in the state of New York, Fishers Island is accessible only by ferry. While during the summer months the island’s population swells to over 3000, year-round residents total only about 300. Delivery of daily supplies and materials is therefore limited. Contractors live on the mainland, creating short workdays due to the commute, thereby causing construction of a new home to take longer and effectively cost more. Leveraging off-site construction, shipping volumetric prefabricated modules—complete with plumbing, electrical, and finishes—makes for a much more cost-effective method of building on the island. The boxes were designed specifically not only for the client and site, but also to fit on the standard ferry.

The client, a family of four with 2 recent college-graduates, has extended family that also lives on the island. This house is designed to accommodate and entertain them all for generations to come. Often called “the ark” by locals, the house is comprised of eight Lego-like boxes sitting on a panelized concrete foundation that was also prefabricated. Integrated into the sloping landscape, the long and linear vessel is organized by public and private uses. The main level contains communal living spaces that span three parallel boxes, while the second floor contains the immediate family’s private spaces. The ‘east wing’ contains guest rooms and a stair down to a large bunkroom below for future grandkids. As the main gathering and entertaining area, the roof becomes another level of living space, essentially an outdoor room, partially covered and equipped with a kitchen, seating, and an outdoor fireplace.

All of the structure’s horizontal surfaces are utilized for roof decks, green areas, or solar panels. Hot water generated by the sun keeps the house warm via the radiant floor heating system during colder months.

ACCORDION BOTTOM CONTAINER TYPES

CSS CODE FOR OUR WEBSITE!!

CUSTOM CSS – FOR RES4 WEBSITE

//Format Date in "news" section

time {

font-weight: !important;

font-size: 20px

}

.collection-type-blog article header .entry-title {font-weight: 500;}

//Horizontal Rule Space Properties & body text and space properties

body {

padding-top: 107px;

hr {margin: 0px !important;}

hr {padding: 0px !important;}

a {letter-spacing: 1px;}

p {letter-spacing: 1px;}

a {color: c6c3c3 !important;}

}

//Code Block Space Properties

.code-block {

max-width: 1200px;

padding: 0px !important;

margin: auto;

}

//Hide Project Controls in grid

.project-controls {

display: none !important;

}

//Navigation Aligns w/ bottom of Logo

.main-nav {

padding-top: 35px !important

}

//Fixed Header at top

#header {

position: fixed !important;

margin: auto !important;

max-height: 100px !important;

max-width: 1200px;

padding-left: 20px;

padding-right: 20px;

padding-top: 17px;

padding-bottom: 0px;

top: 0;

right: 0;

left: 0;

background-color: #ffffff;

opacity: 1;

z-index: 9999 !important;

}

//Awards Section Remove padding on Summary Block

.sqs-block.summary-v2-block.sqs-block-summary-v2 {

padding: 0 !important;

margin: 0 !important;

}

//News Section Remove category tags for each blog post

.collection-type-blog article footer {

.ss-social-button {

text-align: right !important;

}

.tags,

.categories {

display: none;}

}

.collection-type-blog article footer .meta-row {

}

//----------------------------------

// This applies from 750px & below

@media (max-width: 750px)

{body {

padding-top: 0px !important;

}}

// Hides Fixed header Padding

@media (max-width: 750px)

{#header {

padding-top: 0px !important;

position: static !important;

}}

// Hides Fixed footer Padding

@media (max-width: 750px)

{#footer {

margin-top: 0px !important;

padding-top: 0px !important;

padding-bottom: 0px !important;

}}

// Removes code block padding from body

@media (max-width: 750px)

{.sqs-block.code-block.sqs-block:last-child {

padding-bottom: 0px !important;

}}

@media (max-width: 750px)

{#sidebar {

display: none !important;

}}

//---------------------------------(remove anything underneath this line when adding new galleries to the accordion)

//Slideshow Gallery White Background

.sqs-gallery-block-slideshow {

background-color: white;

}

//Slideshow Gallery Title Appearance Edit

.sqs-gallery-block-slideshow .meta .meta-title {

font-size: 13px;

color: #666;

opacity: .8;

}

//Slideshow Gallery Hide Gradient

.sqs-gallery-block-slideshow.sqs-gallery-block-meta-position-bottom .meta {background: none;

}

.sqs-gallery-meta-container a {

padding:0 !important;

}

.sqs-gallery-meta-container .previous {

float:left;

}

.sqs-gallery-meta-container .next {

float:right;

}

/* Size of arrows */

.sqs-gallery-meta-container a::before {

font-size:20px !important;

}

.sqs-gallery-block-slideshow:hover .sqs-gallery-controls a::before {

background: #444;

padding-top: 12px;

padding-bottom: 12px;

padding-left: 5px;

padding-right: 5px;

opacity:0.7;

transition: opacity 200ms ease-in;

}

.sqs-gallery-block-slideshow .sqs-gallery-controls a::before {

opacity:0;

}

.sqs-gallery .slide .meta {

transition: opacity 200ms ease-in;

}

.sqs-gallery-controls .previous,

.sqs-gallery-controls .next {

background-color:transparent !important;

}