dreamcast
Version:
Dreamcast: v10 Styleguide
712 lines (647 loc) • 31.9 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Styling framework for ALEX v10</title>
<link rel="stylesheet" href="css/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<div class="stage" id="previewer">
<header><h1>ALEX V10 Simulator </h1></header>
<div id="HalfWidthSingleColumn" class="row">
<div class="col-8">
<!-- art -->
<div class="art tog"><div>art probably shouldn't go in this layout</div></div>
<!-- display texts -->
<div class="section-header tog">
CDHPI WITH HSA PLAN
</div>
<div class="summary-group tog">
<div class="summary-header">Does this look right to you?</div>
<div class="summary-list">
<ul>
<li>Premium $15/paycheck (15 paychecks)</li>
<li>Estimated expenses with this plan $1</li>
<li>Covering Tier 1</li>
</ul>
</div>
</div>
<div class="card-group tog">
<div class="card-header">Kind of a Bad Plan</div>
<div class="card-body">This plan stinks. You'll lose all of your money because somehow this plan forces you to spend all of your money caring for a miniature horse that you aren't even allowed to see a picture of. Please don't pick it.
</div>
</div>
<div>
<div class="explanation explanation-high tog">
Potential savings with a limited network:
</div>
</div>
<div>
<div class="explanation-number tog">
$8,008
</div>
</div>
<div>
<div class="explanation explanation-low tog">
That’s how much you could save, if you’re willing to be on a plan that only covers care in the network.
</div>
</div>
<div>
<div class="explanation list explanation-list tog">
<ul>
<li>Example of one kind of covered service </li>
<li>Example of something else that’s covered</li>
<li>Example of another type of covered service</li>
</ul>
</div>
</div>
<div class="line tog"></div>
<div class="subheader explanation-bold tog">
Your 2018 HSA limit: $7,750
<br>The Crap FActory'Z<sup>®</sup> contribution: $1000
</div>
<div class="subheader explanation-bold-result tog">
Your adjusted maximum: $6,750
</div>
<p class="body tog"> Somebody once told me the world is gonna roll me I ain't the sharpest tool in the shed She was looking kind of dumb with her finger and her thumb In the shape of an "L" on her forehead Well the years start coming and they don't stop coming Fed to the rules and I hit the ground running Didn't make sense not to live for fun Your brain gets smart but your head gets dumb So much to do, so much to see So what's wrong with taking the back streets? You'll never know if you don't go You'll never shine if you don't glow Hey now, you're an all-star, get your game on, go play Hey now, you're a rock star, get the show on, get paid And all that glitters is gold Only shooting stars break the mold.</p>
<!-- column divide goes here -->
<!-- question -->
<div class="question tog">
I’m here to help you make informed decisions about your benefits. Shall we begin?
</div>
<div class="footnote tog">
* Don’t include your preventive check-up! One per person is fully covered, each year.
</div>
<!-- inputs -->
<div class="radio-group tog">
<div class="radiobutton-input">
<input type="radio" value="None" id="radio1" name="radio" />
<label for="radio1"></label>
<span>Choose wisely</span>
</div>
<div class="radiobutton-input">
<input type="radio" value="None" id="radio2" name="radio" />
<label for="radio2"></label>
<span>Choose poorly</span>
</div>
<div class="radiobutton-input">
<input type="radio" value="None" id="radio3" name="radio" />
<label for="radio3"></label>
<span>Don't choose</span>
</div>
</div>
<div class="checkbox-group tog">
<div class="checkbox-input">
<input type="checkbox" value="None" id="checkbox1" name="checkbox" />
<label for="checkbox1"></label>
<span>You</span>
</div>
<div class="checkbox-input">
<input type="checkbox" value="None" id="checkbox2" name="checkbox" />
<label for="checkbox2"></label>
<span>Your Spouse</span>
</div>
<div class="checkbox-input">
<input type="checkbox" value="None" id="checkbox3" name="checkbox" />
<label for="checkbox3"></label>
<span>Kid 1</span>
</div>
<div class="checkbox-input">
<input type="checkbox" value="None" id="checkbox3" name="checkbox" />
<label for="checkbox3"></label>
<span>Kid 2</span>
</div>
</div>
<div class="fib-group tog">
<form class="fill-in-the-blank" action="#">
<div class="fib-multi">
<label for="fib-112">
For You
</label>
<input type="number" id="fib-11" value="" maxlength="2" placeholder="$" class="fib-input number" pattern="(-?[\d](.[\d])?)*">
</div>
<div class="fib-multi">
<label for="fib-122">
For your spouse
</label>
<input type="number" id="fib-12" value="" maxlength="2" placeholder="$" class="fib-input number" pattern="(-?[\d](.[\d])?)*">
</div>
<div class="fib-multi">
<label for="fib-132">
For Kid 1
</label>
<input type="number" id="fib-13" value="" maxlength="2" placeholder="$" class="fib-input number" pattern="(-?[\d](.[\d])?)*">
</div>
<div class="fib-multi">
<label for="fib-142">
For Kid 2
</label>
<input type="number" id="fib-14" value="" maxlength="2" placeholder="$" class="fib-input number" pattern="(-?[\d](.[\d])?)*">
</div>
</form>
</div>
<form class="fill-in-the-blank fib-single tog">
<div class="fib-single">
<label for="fib-11">
</label>
<input type="text" id="fib-11" value="" maxlength="524288" placeholder="cornboy@cornlovers.com" class="fib-input string" pattern=".*">
<p class="error max-characters" style="display: none;">524288 maximum characters
</p>
<p class="error data-type" style="display: none;">Input must be a valid e-mail
</p>
</div>
</form>
<div class="choice dropdown-selector tog">
<select>
<option selected="" value="" disabled="" hidden="">Choose One</option>
<option label="Yes, let's estimate costs to help me pick a plan." value="Yes, let's estimate costs to help me pick a plan.">Yes, let's estimate costs to help me pick a plan.</option>
<option label="Show me a side-by-side plan comparison. " value="Show me a side-by-side plan comparison. ">Show me a side-by-side plan comparison. </option>
<option label="Explain how a plan works." value="Explain how a plan works.">Explain how a plan works.</option>
<option label="I already know what I'll sign up for." value="I already know what I'll sign up for.">I already know what I'll sign up for.</option>
<option label="I don't want medical coverage." value="I don't want medical coverage.">I don't want medical coverage.</option>
</select>
</div>
<div class="button-single tog">
<button class="button">Submit</button>
</div>
<div class="button-group tog">
<button class="button">Mustard</button>
<button class="button">Mayostard</button>
<button class="button">Mustardayonnaise</button>
<button class="button">Mustmayostard-ayonnaise</button>
</div>
</div>
<div class="col-4">
<div class="client-note-group tog">
<div class="client-note-header">Note from DJ Khaled</div>
<div class="client-note">
<p>Hammock talk come soon. The key is to drink coconut, fresh coconut, trust me. Fan luv. To be successful you’ve got to work hard, to make history, simple, you’ve got to make it. How’s business? Boomin. You see that bamboo behind me though, you see that bamboo? Ain’t nothin’ like bamboo. Bless up. I’m up to something. You do know, you do know that they don’t want you to have lunch. I’m keeping it real with you, so what you going do is have lunch. The first of the month is coming, we have to get money, we have no choice. It cost money to eat and they don’t want you to eat.</p>
<p>Give thanks to the most high. Major key, don’t fall for the trap, stay focused. It’s the ones closest to you that want to see you fail. Another one. Bless up. We don’t see them, we will never see them. Egg whites, turkey sausage, wheat toast, water. Of course they don’t want us to eat our breakfast, so we are going to enjoy our breakfast. A major key, never panic. Don’t panic, when it gets crazy and rough, don’t panic, stay calm. Let’s see what Chef Dee got that they don’t want us to eat.</p>
<p>How’s business? Boomin. In life there will be road blocks but we will over come it. The ladies always say Khaled you smell good, I use no cologne. Cocoa butter is the key. Bless up. Find peace, life is like a water fall, you’ve gotta flow. Bless up. The weather is amazing, walk with me through the pathway of more success. Take this journey with me, Lion! Eliptical talk. Congratulations, you played yourself. Life is what you make it, so let’s make it. You do know, you do know that they don’t want you to have lunch. I’m keeping it real with you, so what you going do is have lunch.</p>
<p>To be successful you’ve got to work hard, to make history, simple, you’ve got to make it. I’m up to something. Cloth talk. We the best. We the best. We the best. How’s business? Boomin. The key to success is to keep your head above the water, never give up. Don’t ever play yourself. Always remember in the jungle there’s a lot of they in there, after you overcome they, you will make it to paradise.</p>
</div>
</div>
</div>
</div>
<div id="TwoColumn_66_33" class="row">
<div class="col-8">
<!-- art -->
<div class="art tog"></div>
<!-- display texts -->
<div class="section-header tog">
HDMI TO VGA HEALTH BLASTER X
</div>
<div class="summary-group tog">
<div class="summary-header">Does this look right to you?</div>
<div class="summary-list">
<ul>
<li>Premium $15/paycheck (15 paychecks)</li>
<li>Estimated expenses with this plan $1</li>
<li>Covering Tier 1</li>
</ul>
</div>
</div>
<div class="card-group tog">
<div class="card-header">Kind of a Bad Plan</div>
<div class="card-body">This plan stinks. You'll lose all of your money because somehow this plan forces you to spend all of your money caring for a miniature horse that you aren't even allowed to see a picture of. Please don't pick it.
</div>
</div>
<div>
<div class="explanation explanation-high tog">
Potential savings with a limited network:
</div>
</div>
<div>
<div class="explanation-number tog">
$8,008
</div>
</div>
<div>
<div class="explanation explanation-low tog">
That’s how much you could save, if you’re willing to be on a plan that only covers care in the network.
</div>
</div>
<div>
<div class="explanation list explanation-list tog">
<ul>
<li>Example of one kind of covered service </li>
<li>Example of something else that’s covered</li>
<li>Example of another type of covered service</li>
</ul>
</div>
</div>
<div class="line tog"></div>
<div class="subheader explanation-bold tog">
Your 2018 HSA limit: $7,750
<br>The Crap FActory'Z<sup>®</sup> contribution: $1000
</div>
<div class="subheader explanation-bold-result tog">
Your adjusted maximum: $6,750
</div>
<p class="body tog">It's been one week since you looked at me Cocked your head to the side and said, "I'm angry." Five days since you laughed at me saying, "Get back together come back and see me." Three days since the living room I realized it's all my fault, but couldn't tell you Yesterday you'd forgiven me but it'll still be two days 'til I say I'm sorry. Hold it now and watch the hoodwink As I make you stop, think You'll think you're looking at Aquaman I summon fish to the dish, although I like the Chalet Swiss I like the sushi 'Cause it's never touched a frying pan Hot like wasabi when I bust rhymes Big like LeAnn Rimes Because I'm all about value.</p>
</div>
<div class="col-4">
<!-- question -->
<div class="question tog">
May I explain why this plan might be the one for you?
</div>
<div class="footnote tog">
* Don’t include your preventive check-up! One per person is fully covered, each year.
</div>
<!-- inputs -->
<div class="radio-group tog">
<div class="radiobutton-input">
<input type="radio" value="None" id="radio1" name="radio" />
<label for="radio1"></label>
<span>Choose wisely</span>
</div>
<div class="radiobutton-input">
<input type="radio" value="None" id="radio2" name="radio" />
<label for="radio2"></label>
<span>Choose poorly</span>
</div>
<div class="radiobutton-input">
<input type="radio" value="None" id="radio3" name="radio" />
<label for="radio3"></label>
<span>Don't choose</span>
</div>
</div>
<div class="checkbox-group tog">
<div class="checkbox-input">
<input type="checkbox" value="None" id="checkbox1" name="checkbox" />
<label for="checkbox1"></label>
<span>You</span>
</div>
<div class="checkbox-input">
<input type="checkbox" value="None" id="checkbox2" name="checkbox" />
<label for="checkbox2"></label>
<span>Your Spouse</span>
</div>
<div class="checkbox-input">
<input type="checkbox" value="None" id="checkbox3" name="checkbox" />
<label for="checkbox3"></label>
<span>Kid 1</span>
</div>
<div class="checkbox-input">
<input type="checkbox" value="None" id="checkbox3" name="checkbox" />
<label for="checkbox3"></label>
<span>Kid 2</span>
</div>
</div>
<div class="fib-group tog">
<form class="fill-in-the-blank" action="#">
<div class="fib-multi">
<label for="fib-11">
For You
</label>
<input type="number" id="fib-11" value="" maxlength="2" placeholder="$" class="fib-input number" pattern="(-?[\d](.[\d])?)*">
</div>
<div class="fib-multi">
<label for="fib-12">
For your spouse
</label>
<input type="number" id="fib-12" value="" maxlength="2" placeholder="$" class="fib-input number" pattern="(-?[\d](.[\d])?)*">
</div>
<div class="fib-multi">
<label for="fib-13">
For Kid 1
</label>
<input type="number" id="fib-13" value="" maxlength="2" placeholder="$" class="fib-input number" pattern="(-?[\d](.[\d])?)*">
</div>
<div class="fib-multi">
<label for="fib-14">
For Kid 2
</label>
<input type="number" id="fib-14" value="" maxlength="2" placeholder="$" class="fib-input number" pattern="(-?[\d](.[\d])?)*">
</div>
</form>
</div>
<form class="fill-in-the-blank fib-single tog">
<div class="fib-single">
<label for="fib-11">
</label>
<input type="text" id="fib-11" value="" maxlength="524288" placeholder="cornboy@cornlovers.com" class="fib-input string" pattern=".*">
<p class="error max-characters" style="display: none;">524288 maximum characters
</p>
<p class="error data-type" style="display: none;">Input must be a valid e-mail
</p>
</div>
</form>
<div class="choice dropdown-selector tog">
<select>
<option selected="" value="" disabled="" hidden="">Choose One</option>
<option label="Yes, let's estimate costs to help me pick a plan." value="Yes, let's estimate costs to help me pick a plan.">Yes, let's estimate costs to help me pick a plan.</option>
<option label="Show me a side-by-side plan comparison. " value="Show me a side-by-side plan comparison. ">Show me a side-by-side plan comparison. </option>
<option label="Explain how a plan works." value="Explain how a plan works.">Explain how a plan works.</option>
<option label="I already know what I'll sign up for." value="I already know what I'll sign up for.">I already know what I'll sign up for.</option>
<option label="I don't want medical coverage." value="I don't want medical coverage.">I don't want medical coverage.</option>
</select>
</div>
<div class="button-single tog">
<button class="button">Submit</button>
</div>
<div class="button-group tog">
<button class="button">Mustard</button>
<button class="button">Mayostard</button>
<button class="button">Mustardayonnaise</button>
<button class="button">Mustmayostard-ayonnaise</button>
</div>
<div class="client-note-group tog">
<div class="client-note-header">Note from DJ Khaled</div>
<div class="client-note">
<p>Hammock talk come soon. The key is to drink coconut, fresh coconut, trust me. Fan luv. To be successful you’ve got to work hard, to make history, simple, you’ve got to make it. How’s business? Boomin. You see that bamboo behind me though, you see that bamboo? Ain’t nothin’ like bamboo. Bless up. I’m up to something. You do know, you do know that they don’t want you to have lunch. I’m keeping it real with you, so what you going do is have lunch. The first of the month is coming, we have to get money, we have no choice. It cost money to eat and they don’t want you to eat.</p>
<p>Give thanks to the most high. Major key, don’t fall for the trap, stay focused. It’s the ones closest to you that want to see you fail. Another one. Bless up. We don’t see them, we will never see them. Egg whites, turkey sausage, wheat toast, water. Of course they don’t want us to eat our breakfast, so we are going to enjoy our breakfast. A major key, never panic. Don’t panic, when it gets crazy and rough, don’t panic, stay calm. Let’s see what Chef Dee got that they don’t want us to eat.</p>
<p>How’s business? Boomin. In life there will be road blocks but we will over come it. The ladies always say Khaled you smell good, I use no cologne. Cocoa butter is the key. Bless up. Find peace, life is like a water fall, you’ve gotta flow. Bless up. The weather is amazing, walk with me through the pathway of more success. Take this journey with me, Lion! Eliptical talk. Congratulations, you played yourself. Life is what you make it, so let’s make it. You do know, you do know that they don’t want you to have lunch. I’m keeping it real with you, so what you going do is have lunch.</p>
<p>To be successful you’ve got to work hard, to make history, simple, you’ve got to make it. I’m up to something. Cloth talk. We the best. We the best. We the best. How’s business? Boomin. The key to success is to keep your head above the water, never give up. Don’t ever play yourself. Always remember in the jungle there’s a lot of they in there, after you overcome they, you will make it to paradise.</p>
</div>
</div>
</div>
</div>
<div id="FullWidthSingleColumn" class="row">
<div class="col-2"></div>
<div class="col-8">
<!-- art -->
<div class="art tog"></div>
<!-- display texts -->
<div class="section-header tog">
this template is art only, don't use text
</div>
<div class="summary-group tog">
<div class="summary-header">don't use text in this template</div>
<div class="summary-list">
<ul>
<li>it looks bad</li>
<li>this template is for art moments only</li>
</ul>
</div>
</div>
<div class="card-group tog">
<div class="card-header">don't use text in this template</div>
<div class="card-body">Please don't use text
</div>
</div>
<div>
<div class="explanation explanation-high tog">
this template is art only, don't use text
</div>
</div>
<div>
<div class="explanation-number tog">
this template is art only, don't use text
</div>
</div>
<div>
<div class="explanation explanation-low tog">
this template is art only, don't use text
</div>
</div>
<div>
<div class="explanation list explanation-list tog">
<ul>
<li>this template is art only, don't use text</li>
</ul>
</div>
</div>
<div class="line tog"></div>
<div class="subheader explanation-bold tog">
this template is art only, don't use text
</div>
<div class="subheader explanation-bold-result tog">
this template is art only, don't use text
</div>
<p class="body tog">this template is art only, don't use text</p>
<!-- column divide goes here -->
<!-- question -->
<div class="question tog">
this template is art only, don't use text
</div>
<div class="footnote tog">
this template is art only, don't use text
</div>
<!-- inputs -->
<div class="radio-group tog">
<div class="radiobutton-input">
<input type="radio" value="None" id="radio1" name="radio" />
<label for="radio1"></label>
<span>this template is art only, don't use inputs</span>
</div>
</div>
<div class="checkbox-group tog">
<div class="checkbox-input">
<input type="checkbox" value="None" id="checkbox1" name="checkbox" />
<label for="checkbox1"></label>
<span>this template is art only, don't use inputs</span>
</div>
</div>
<div class="fib-group tog">
<form class="fill-in-the-blank" action="#">
<div class="fib-multi">
<label for="fib-111">
For You
</label>
<input type="number" id="fib-11" value="" maxlength="2" placeholder="$" class="fib-input number" pattern="(-?[\d](.[\d])?)*">
</div>
<div class="fib-multi">
<label for="fib-121">
For your spouse
</label>
<input type="number" id="fib-12" value="" maxlength="2" placeholder="$" class="fib-input number" pattern="(-?[\d](.[\d])?)*">
</div>
<div class="fib-multi">
<label for="fib-131">
For Kid 1
</label>
<input type="number" id="fib-13" value="" maxlength="2" placeholder="$" class="fib-input number" pattern="(-?[\d](.[\d])?)*">
</div>
<div class="fib-multi">
<label for="fib-141">
For Kid 2
</label>
<input type="number" id="fib-14" value="" maxlength="2" placeholder="$" class="fib-input number" pattern="(-?[\d](.[\d])?)*">
</div>
</form>
</div>
<form class="fill-in-the-blank fib-single tog">
<div class="fib-single">
<label for="fib-11">
</label>
<input type="text" id="fib-11" value="" maxlength="524288" placeholder="cornboy@cornlovers.com" class="fib-input string" pattern=".*">
<p class="error max-characters" style="display: none;">524288 maximum characters
</p>
<p class="error data-type" style="display: none;">Input must be a valid e-mail
</p>
</div>
</form>
<div class="choice dropdown-selector tog">
<select>
<option selected="" value="" disabled="" hidden="">this template is art only, don't use inputs</option>
<option label="Yes, let's estimate costs to help me pick a plan." value="Yes, let's estimate costs to help me pick a plan.">this template is art only, don't use inputs</option>
</select>
</div>
<div class="button-single tog">
<button class="button">no buttons in this template, don't do it</button>
</div>
<div class="button-group tog">
<button class="button">don't</button>
<button class="button">use</button>
<button class="button">buttons</button>
<button class="button">either</button>
</div>
<div class="client-note-group tog">
<div class="client-note-header">Note from DJ Khaled</div>
<div class="client-note">
<p>Hammock talk come soon. The key is to drink coconut, fresh coconut, trust me. Fan luv. To be successful you’ve got to work hard, to make history, simple, you’ve got to make it. How’s business? Boomin. You see that bamboo behind me though, you see that bamboo? Ain’t nothin’ like bamboo. Bless up. I’m up to something. You do know, you do know that they don’t want you to have lunch. I’m keeping it real with you, so what you going do is have lunch. The first of the month is coming, we have to get money, we have no choice. It cost money to eat and they don’t want you to eat.</p>
<p>Give thanks to the most high. Major key, don’t fall for the trap, stay focused. It’s the ones closest to you that want to see you fail. Another one. Bless up. We don’t see them, we will never see them. Egg whites, turkey sausage, wheat toast, water. Of course they don’t want us to eat our breakfast, so we are going to enjoy our breakfast. A major key, never panic. Don’t panic, when it gets crazy and rough, don’t panic, stay calm. Let’s see what Chef Dee got that they don’t want us to eat.</p>
<p>How’s business? Boomin. In life there will be road blocks but we will over come it. The ladies always say Khaled you smell good, I use no cologne. Cocoa butter is the key. Bless up. Find peace, life is like a water fall, you’ve gotta flow. Bless up. The weather is amazing, walk with me through the pathway of more success. Take this journey with me, Lion! Eliptical talk. Congratulations, you played yourself. Life is what you make it, so let’s make it. You do know, you do know that they don’t want you to have lunch. I’m keeping it real with you, so what you going do is have lunch.</p>
<p>To be successful you’ve got to work hard, to make history, simple, you’ve got to make it. I’m up to something. Cloth talk. We the best. We the best. We the best. How’s business? Boomin. The key to success is to keep your head above the water, never give up. Don’t ever play yourself. Always remember in the jungle there’s a lot of they in there, after you overcome they, you will make it to paradise.</p>
</div>
</div>
</div>
<div class="col-2"></div>
</div>
<div class="options-panel">
<div id="panelToggle">
</div>
<form action="#">
<fieldset>
<h3>Template</h3>
<select name="template" id="template">
<option value="HalfWidthSingleColumn">Single Column</option>
<option value="TwoColumn_66_33">Two Column</option>
<option value="FullWidthSingleColumn">Art only</option>
</select>
</fieldset>
</form>
<div class="toggles" id="toggles">
<h3>Art</h3>
<div class="toggle-input">
<input class="toggle" name="art" id="art" type="checkbox">
<label for="art">art</label>
</div>
<h3>Display Text</h3>
<div class="toggle-input">
<input class="toggle" name="section-header" id="section-header" type="checkbox">
<label for="section-header">section header</label>
</div>
<div class="toggle-input">
<input class="toggle" name="summary-group" id="summary-group" type="checkbox">
<label for="summary-group">summary question group</label>
</div>
<div class="toggle-input">
<input class="toggle" name="card-group" id="card-group" type="checkbox">
<label for="card-group">incentive group</label>
</div>
<div class="toggle-input">
<input class="toggle" name="explanation-high" id="explanation-high" type="checkbox">
<label for="explanation-high">explanation high</label>
</div>
<div class="toggle-input">
<input class="toggle" name="explanation-number" id="explanation-number" type="checkbox">
<label for="explanation-number">explanation subhead / number</label>
</div>
<div class="toggle-input">
<input class="toggle" name="explanation-low" id="explanation-low" type="checkbox">
<label for="explanation-low">explanation low</label>
</div>
<div class="toggle-input">
<input class="toggle" name="explanation-list" id="explanation-list" type="checkbox">
<label for="explanation-list">explanation list</label>
</div>
<div class="toggle-input">
<input class="toggle" name="explanation-bold" id="explanation-bold" type="checkbox">
<label for="explanation-bold">explanation bold</label>
</div>
<div class="toggle-input">
<input class="toggle" name="line" id="line" type="checkbox">
<label for="line">line</label>
</div>
<div class="toggle-input">
<input class="toggle" name="explanation-bold-result" id="explanation-bold-result" type="checkbox">
<label for="explanation-bold-result">explanation bold, result</label>
</div>
<div class="toggle-input">
<input class="toggle" name="body" id="body" type="checkbox">
<label for="body">body</label>
</div>
<div class="toggle-input">
<input class="toggle" name="client-note-group" id="client-note-group" type="checkbox">
<label for="client-note">client note</label>
</div>
<h3>Display Text - Question Text</h3>
<div class="toggle-input">
<input class="toggle" name="question" id="question" type="checkbox">
<label for="question">question</label>
</div>
<div class="toggle-input">
<input class="toggle" name="footnote" id="footnote" type="checkbox">
<label for="footnote">footnote</label>
</div>
<h3>Inputs</h3>
<div class="toggle-input">
<input class="toggle" name="radio-group" id="radio-group" type="checkbox">
<label for="radio-group">radio buttons</label>
</div>
<div class="toggle-input">
<input class="toggle" name="checkbox-group" id="checkbox-group" type="checkbox">
<label for="checkbox-group">checkboxes</label>
</div>
<div class="toggle-input">
<input class="toggle" name="fib-group" id="fib-group" type="checkbox">
<label for="fib-group">text input group</label>
</div>
<div class="toggle-input">
<input class="toggle" name="fib-single" id="fib-single" type="checkbox">
<label for="fib-single">text input single</label>
</div>
<div class="toggle-input">
<input class="toggle" name="dropdown-selector" id="dropdown-selector" type="checkbox">
<label for="dropdown-selector">dropdown</label>
</div>
<div class="toggle-input">
<input class="toggle" name="button-single" id="button-single" type="checkbox">
<label for="button-single">button single</label>
</div>
<div class="toggle-input">
<input class="toggle" name="button-group" id="button-group" type="checkbox">
<label for="button-group">button group</label>
</div>
</div>
</div>
</div>
<script>
// for the dropdown
$("#template").change(function(){
$(this).find("option:selected").each(function(){
var optionValue = $(this).attr("value");
if(optionValue){
$(".row").not("#" + optionValue).hide();
$("#" + optionValue).show();
} else{
$(".row").hide();
}
});
}).change();
// for the contents
$("#toggles").change(function(){
$(".tog").hide();
$(this).find(":checked").each(function(){
var optionName = $(this).attr("name");
if(optionName){
$("." + optionName).show();
} else{
$(".tog").hide();
}
});
}).change();
// for the menu hider
$( function() {
$( "#panelToggle" ).on( "click", function() {
$( ".options-panel" ).toggleClass( "closed" );
});
} );
</script>
</body>
</html>