Building an Accordion without JavaScript - Part II

Developer
Michael
Size
3,800 Kb
Views
14,168
  1. Building an Accordion without JavaScript - Part II Previews
  2. Building an Accordion without JavaScript - Part II HTML Codes
  3. Building an Accordion without JavaScript - Part II CSS Codes
  4. Building an Accordion without JavaScript - Part II JS Codes

How do I make an building an accordion without javascript - part ii?

What is a building an accordion without javascript - part ii? How do you make a building an accordion without javascript - part ii? This script and codes were developed by Michael on 14 October 2022, Friday.

Building an Accordion without JavaScript - Part II Previews
IQ Test

Building an Accordion without JavaScript - Part II - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Building an Accordion without JavaScript - Part II</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='container'> <div class="accordion"> <div class="accordion__single"> <input class="accordion__single__hidden" type="checkbox" id="question-one"> <label class="accordion__single__question" for="question-one">What is Analog devices sample policy?</label> <p class="accordion__single__answer"> Analog Devices is pleased to offer a limited amount of free samples to qualified customers. Samples usually ship from an Analog Devices warehouse within 24 hours if they are in stock. Website registration is required to request free samples, and you must use a company or university email domain address when registering. Use of a free or 3rd party email account is not allowed for samples requests. </p> </div><!-- end .accordion__single --> <div class="accordion__single"> <input class="accordion__single__hidden" type="checkbox" id="question-two"> <label class="accordion__single__question" for="question-two">Which Analog Devices products can I sample?</label> <p class="accordion__single__answer"> We offer many of our products to sample online. Some exceptions are special material manufactured for a single customer, parts that are on allocation or some very low volume parts. If you would like to order a part that is not available, you may be able to purchase it on the web through Buy Online or you can contact one of our authorized distributors. </p> </div><!-- end .accordion__single --> <div class="accordion__single"> <input class="accordion__single__hidden" type="checkbox" id="question-three"> <label class="accordion__single__question" for="question-three">How do I request samples online?</label> <p class="accordion__single__answer"> Locate the part(s) you need, either from the Product Page, or by choosing the Samples link at the top of the Analog Devices home page. Once you have chosen your parts, you will then be re-directed to the shopping cart. </p> </div><!-- end .accordion__single --> <div class="accordion__single"> <input class="accordion__single__hidden" type="checkbox" id="question-four"> <label class="accordion__single__question" for="question-four">Can I request samples with a 3rd party email account (such as Yahoo or Hotmail)?</label> <p class="accordion__single__answer"> We're sorry, but online sample requests will only be accepted from valid email addresses that originate from a company (example: [email protected]) or from an educational institution (example: [email protected]). Analog Devices cannot accept sample requests from accounts that have been created using third-party email providers, such as Yahoo, Hotmail, MSN, and AOL. </p> </div><!-- end .accordion__single --> </div><!-- end .accordion -->
</div><!-- end .container --> <script src="js/index.js"></script>
</body>
</html>

Building an Accordion without JavaScript - Part II - Script Codes CSS Codes

.accordion__single__hidden { display: none;
}
.accordion__single__hidden:checked ~ .accordion__single__answer { max-height: 400px; opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0); margin-top: 14px;
}
.accordion__single__hidden:checked ~ .accordion__single__question:after { content: '-';
}
.accordion__single__answer { margin-top: 0; max-height: 0; opacity: 0; -webkit-transform: translate(0, 50%); transform: translate(0, 50%); -webkit-transition: all .4s ease; transition: all .4s ease; position: relative;
}
html, body { height: 100%;
}
.container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 100%;
}
.accordion { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; line-height: 1.5; max-width: 80%;
}
.accordion__single { margin-bottom: 30px;
}
.accordion__single__question { font-weight: 600; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; position: relative;
}
.accordion__single__question:hover, .accordion__single__question:focus { text-decoration: underline;
}
.accordion__single__question:after { display: inline-block; margin-left: 10px; color: red; content: '+';
}
.accordion__single__answer { margin-top: 5px;
}

Building an Accordion without JavaScript - Part II - Script Codes JS Codes

/*
no javascript used!
sample questions taken from: http://www.analog.com/en/support/customer-service-resources/sales/sample-products/faq-sample-requests.html
*/
Building an Accordion without JavaScript - Part II - Script Codes
Building an Accordion without JavaScript - Part II - Script Codes
Home Page Home
Developer Michael
Username mjtweaver
Uploaded October 14, 2022
Rating 4
Size 3,800 Kb
Views 14,168
Do you need developer help for Building an Accordion without JavaScript - Part II?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Michael (mjtweaver) Script Codes
Name
Slick Slider - Progress Bar
Filtering
A Pen by Michael
SVG Logo
Building an Accordion without JavaScript - Part I
Coburg Banks SVG Logo
Masonry debugging
Product Magnification without JavaScript
Using Level 4 CSS Validity Pseudo-Classes to Improve Form UX.
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!