I'm trying to make a rating system, ten images of numbers, (1, 2, 3... and so on), and I'd like to know how could I put to those images a value, (1, 2, 3... respectively), inside of a form, so when user click on submit, I can get in PHP the value from the pic selected.
Basically I don't know how to make it know which image is being selected in.
<div class="col-md-6 col-sm-4 col-md-3 order-md-1 offset-md-3">
<h4 class="mb-3">Rate system</h4>
<form class="needs-validation" method="POST" action="test.php">
<div class="row">
<div class="col-md-12 mb-3">
<label for="firstName">Name</label>
<input type="text" class="form-control" placeholder="Gustavo" name="name" required>
<div class="invalid-feedback">
Is a name is necessary.
</div>
</div>
<div class="col-md-12 mb-3">
<img class="d-block mx-auto mb-1" src="1.png">
<img class="d-block mx-auto mb-1" src="2.png">
<img class="d-block mx-auto mb-1" src="3.png">
<img class="d-block mx-auto mb-1" src="4.png">
<img class="d-block mx-auto mb-1" src="5.png">
</div>
<hr class="mb-4">
<button class="btn btn-primary btn-lg btn-block" type="submit">¡Go!</button>
</form>
</div>
</div>
You need to set value for star after clicking on star symbol & change as well as data-star attribute value for selected stars. After selected stars will highlighted as play with some CSS code with help of :nth-child(number) function.
$(document).on('click', '.list-star li', function(){
$(this).parent().attr('data-star', Number($(this).index())+1);
$('#setRating').val(Number($(this).index())+1);
});
.list-star li{
color: #999;
margin-right: 0px!important;
cursor: pointer;
padding: 0px 3px;
font-size: 20px;
line-height: 1.1;
}
[data-star="1"] li:nth-child(1),
[data-star="2"] li:nth-child(1), [data-star="2"] li:nth-child(2),
[data-star="3"] li:nth-child(1), [data-star="3"] li:nth-child(2), [data-star="3"] li:nth-child(3),
[data-star="4"] li:nth-child(1), [data-star="4"] li:nth-child(2), [data-star="4"] li:nth-child(3), [data-star="4"] li:nth-child(4),
[data-star="5"] li {
color: tomato;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container py-3">
<div class="row justify-content-center">
<div class="col-md-5 col-sm-10">
<h4 class="mb-3">Rate system</h4>
<form class="needs-validation" method="POST" action="test.php">
<div class="row">
<div class="col-md-12 mb-3">
<label for="firstName">Name</label>
<input type="text" class="form-control" placeholder="Gustavo" name="name" required>
<div class="invalid-feedback">Is a name is necessary.</div>
</div>
<div class="col-md-12 mb-3">
<ul class="list-inline list-star" data-star="0">
<li class="list-inline-item">★</li>
<li class="list-inline-item">★</li>
<li class="list-inline-item">★</li>
<li class="list-inline-item">★</li>
<li class="list-inline-item">★</li>
</ul>
<input type="number" name="rating" placeholder="Rating Value" id="setRating" readonly>
</div>
</div>
<hr class="mb-4">
<button class="btn btn-primary btn-lg btn-block" type="submit">Go!</button>
</form>
</div>
</div>
</div>
Use <input> tag and set its value either by js or php. Give each img an id and add onclick listener that changes the input value, which will collect the form at the end ;)
Related
My problem is how can I disable button if the value of datepicker is empty. I tried checking using ngIf and get the value of that datepicker if it is empty, then disable the button, but it does not work. What I want to achieve is when the datepicker is empty button cannot be clickable or [disabled]. Thank you for your answer and help
Here is the code in my component.html
<div class="row pr-30">
<div class="col-md-9 d-flex align-items-center">
<span class="d-flex fw-500 mt--20">
Filters:
</span>
<div class="col-md-4">
<form>
<mat-form-field appearance="fill">
<mat-label> From and To </mat-label>
<mat-date-range-input [formGroup]="expiry_date" [rangePicker]="picker3">
<input matStartDate formControlName="start" placeholder="Start date" (dateChange)="filter_date()">
<input matEndDate formControlName="end" placeholder="End date" (dateChange)="filter_date()">
</mat-date-range-input>
<mat-datepicker-toggle matSuffix [for]="picker3"></mat-datepicker-toggle>
<mat-date-range-picker #picker3></mat-date-range-picker>
<mat-error *ngIf="expiry_date.controls.start.hasError('matStartDateInvalid')">
Invalid start date</mat-error>
<mat-error *ngIf="expiry_date.controls.end.hasError('matEndDateInvalid')">
Invalid end date
</mat-error>
</mat-form-field>
</form>
</div>
</div>
</div>
Here is the button for the download
<div class="col-md-6 d-flex justify-content-end pr-0">
<div class="btn-group dropleft ">
<div class="btn-download" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="d-flex align-items-center">
<div class="row">
<div class="col-md-2 d-flex align-items-center justify-content-start">
<em class="material-icons arrow">
expand_more
</em>
</div>
<div class="col-md-10 d-flex align-items-center justify-content-center">
<span>
Download Reports
</span>
</div>
</div>
</div>
</div>
<div class="dropdown-menu">
<ul class="nav">
<li class="nav-item pr-5 pl-5" style="background-color: white; border-radius: 5px;">
<button class="nav-link download_buttons mt-10" (click)="export_to_pdf()" id="download_pdf">
<img height="30" alt="pdf icon"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABmJLR0QA/wD/AP+gvaeTAAAFN0lEQVR4nO2bT2gcVRzHP29mdrN/u0kWW2m7ra1QUlqhARW8VFCp4k1aFZFaBA1F9GJERawWBC/Fk0WMHsTmoEJF6KUeqrU9ix4KIhWtMWkKQgLb3bjJ7s6Mh9lN9t/svnkzs/nTfC7Jvn37m/f9vd97v9+82YVNNtnkTkaofnBibCJRjEbHbZvnhWAvEAlwXLLMIpgsZJPvnT79TFnFgKHyoTMnz20tGtXvgVGh7MJA2I7NW+m5BYC3VQx4dsCZk+e2aob5I4gDqeEkxfkFAF774GHPF9eNOJoRB8CqljCrpbb2Rhr7ANz6p8D5z38Bm+MoOkDz0tkRb/0AHEhlU+x6+nGVawLNIk0J8WaLeKHp7NqXq7/crjoOaQesiLcPprIpdh07gpGMKV20VbwlId5qEW9E016G74qUhY0qHhkrG1k8vSwFIV6PDTl/16B46JIF/IsX6LFBtNggArFccKwl8bhZDGTm40NosUEARCwDetSzeD0+HKp46BABE2MTCafIEQfTd6XJHT2CkRjwbNgszSPsmvhyEbNc9CReiyTRBjJomg6m6fn6srS5tRiNjoMYTQ0ne4pfuPkvAMl0ex/diDthXykpidcTWecNIwF6eFV2WwTUanuK8wv89um3Ukb2H9ra9Lppw1vKew57bSCz8qbQIJIAsQTVRTlVHmhzQO3GRopkeoCR0W08+Mg9y21+d3trKe+EvZFwxNuWI9yseJAlT6csEAH/tb2v3d40gUVn5kMUD4p3g50IPM+bFSfsQxQPAeWW0IqcENZ8K74dsFYrPFmUl8CN6/P8dOE6xfxSkONR5qNXv7C7vS8QMxZi7I2zJy42tiu7/cqFP9aMeBls7J0Ca6K1XSkCdCNOIe+sz8UTz/kcWn+IffkVQK613XMEuK3t9YonB2w08eDBAa27/UZBag9wS3UyvDASYWeq2c/Fis21OYurN6uYdud+ZRP+Llhcnqkyt2h3tQcwXbSY/N170dQzAvyIBzoONhURPHS3zuEdhmu/qA77BjVO7I+yJSpc+/mlawR0K3K88uHPKykzl9I4PhLhvqzG5ZnO/dJRwZO7De7NaDyaM/juz0rHfn5xdafXCs8L00ULcCLBjULZ5uJUFYC9W8KrEl0thyXeC7fLztof0MO7RlfXWiGJz9XWcbHStXrtC657QNAz/8797cdm1+asQOypZgDo4oAww74xDa420lmgEa+pENR27Xr6W+pwKBxUFnB1gOz9fFhsqaVBgL/y6kulF64OWC3xrXtFqWpzaSa8pSJ9O2wpiq/nfJl+uYYqb8l0Zv7STJVC2W7qFyRSDuh0jCWL7O4cdD9ZepZY7md4G4OuDmiqBWJDCN1Y1QPMMJArhGLOk14tmoLyf8DqV3BB0bMQArDKBUd8pURdfDoTp5Av1c/a1gvTrQ09Y9lZ87WZt1d24MeOjZLOrKvjsWlhMdba2DULND+0aA77PSPbePndJ3yNKIi64uNTVwAYP/ui0lc2XSMg7Cc2/aooe+Gq7k4QD10VhiNetaIMi8Aej8uwlma+Tt8qmrUoHiQi4OuzVxEaPPvKYeW2Y2MPLIs//9mvCE1w9KVDy/38tPmlpwNmp+Z8tzXO/K3p2239/LT5ZeMU9Yr0jIAde7JKbWa1xPbdmbZ+Qbf5pa16qn/T4vUzTykb7eeGF3glKIS4BXDzRvualqGf4men8sv/qtpo/6aoYBKbN7/55Kqqzb4j4JzqZ9scUBhOnErPLdi1HyIp/xanT8wimLydTb6/2gPZZJNN1if/A3wF2OjY6OylAAAAAElFTkSuQmCC" />
<span class=" ml-5 fs-12">Download to PDF</span>
</button>
<hr>
<button class="nav-link download_buttons mb-10" (click)="export_to_xlsx()" id="download_xlsx">
<img height="30" alt="pdf XLSX"
src="data:image/png;base64,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" />
<span class=" ml-5 fs-12">Download to XLSX</span>
</button>
</li>
</ul>
</div>
</div>
</div>
I haven't used Angular Material, but as an example, I would use a reactive form, make the date input required, and link the disabled state of the download button to the form:
HTML
<form [formGroup]="GeneralForm" (ngSubmit)="onSubmitGeneral(GeneralForm)">
<input type="text" formControlName="controllerIPaddress">
<br />
<button [disabled]="!GeneralForm.valid" type="submit">Submit</button>
</form>
TS
public GeneralForm: FormGroup = this.formBuilder.group({
controllerIPaddress: ["", [Validators.required],
readerIPaddress: ["", [Validators.required],
});
I have a multi-step form and i wanted to add a button at the bottom of the page so the user can click next instead of clicking on the tabs at the top.
The button works however, the tab's background color does not change when i click on next.
<div class="right-col">
<div class="profile-content"
<ul id="profile-tabs" class="nav nav-tabs">
<li class="active">
Customer Info
</li>
<li>
Lead Info
</li>
</ul>
<div class="tab-content tab-content-bordered panel-padding">
<div class="widget-article-comments tab-pane panel no-padding no-border fade in active" id="profile-tabs-board">
<form class="form-horizontal" action="leads_add_php.php" method="post" name="form1">
<div class="form-group">
<label for="tag" class="col-sm-3 control-label">Tag</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="tag" name="tag" placeholder="Tag" onchange="document.getElementById('output_tag').innerHTML = this.value"/>
</div>
</div>
<button type="button" id="next" name="next" class="btn btn-primary">Primary</button>
<script>
$("#next").click(function(){
$("#customer-tab").removeClass("active");
$("#leads-tab").addClass("active");
$("#leads-tab .theme-default .nav-tabs .a").css("background", "red");
});
</script>
</div>
BEFORE
AFTER
Here's the CSS when i inspect element
element.style {
}
.theme-default .nav-tabs>li.active>a, .theme-default .nav-tabs>li.active>a:focus, .theme-default .nav-tabs>li.active>a:hover {
background: #1d89cf;
border-bottom: 2px solid #1a7ab9;
}
You have to set id on li tag and give its color.
$(document).ready(function(){
$("#next").click(function(){
$("#licustomer-tab").removeClass("active");
$("#lileads-tab").addClass("active");
$("#profile-tabs .active a").css("background-color", "red");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.theme-default .nav-tabs>li.active>a, .theme-default .nav-tabs>li.active>a:focus, .theme-default .nav-tabs>li.active>a:hover {
background: #1d89cf;
border-bottom: 2px solid #1a7ab9;
}
</style>
<div class="right-col">
<div class="profile-content">
<ul id="profile-tabs" class="nav nav-tabs">
<li class="active" id="licustomer-tab">
Customer Info
</li>
<li id="lileads-tab">
Lead Info
</li>
</ul>
<div class="tab-content tab-content-bordered panel-padding">
<div class="widget-article-comments tab-pane panel no-padding no-border fade in active" id="profile-tabs-board">
<form class="form-horizontal" action="leads_add_php.php" method="post" name="form1">
<div class="form-group">
<label for="tag" class="col-sm-3 control-label">Tag</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="tag" name="tag" placeholder="Tag" onchange="document.getElementById('output_tag').innerHTML = this.value"/>
</div>
</div>
<button type="button" id="next" name="next" class="btn btn-primary">Primary</button>
</div>
try this script
var $tabs = $('.tabbable li');
$('#nexttab').on('click', function() {
$tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show');
$("#test").css("background-color", "red");
});
$('#test1').on('click', function() {
$("#test").css("background-color", "white");
});
<form class="form-horizontal" action='/products/add/' method='post'>
<fieldset>
<div class="tabbable">
<ul class="nav nav-tabs" id="tab_bar">
<li class="active">Product</li>
<li>Offer</li>
</ul>
<div class="tab-content">
<!-- TAB 1 -->
<div class="tab-pane active" id="tab1">
<div class="control-group">
<label class="control-label" for="id_title">Title</label>
<div class="controls">
<input type="text" name="title">
</div>
</div>
<div class="control-group">
<label class="control-label" for="id_manufacturer">Manufacturer</label>
<div class="controls">
<input type="text" name="manufacturer">
<span class="help-inline">
</div>
<div class="btn-group">
<button class="btn" id="nexttab" type="button">Next</button>
</div>
</div>
</div>
<!-- TAB 2 -->
<div class="tab-pane" id="tab2">
<div class="control-group">
<label class="control-label" for="id_condition">Condition</label>
<div class="controls">
<input type="text" name="condition">
</div>
</div>
<div class="control-group">
<label class="control-label" for="id_condition_note">Condition Note</label>
<div class="controls">
<input type="text" name="condition_note">
</div>
</div>
</div>
</div>
<hr class="border-line"> <!-- STYLED IN FORMS.CSS -->
</fieldset>
</form>
working fiddle click here
I am having issues with the Javascript that supports only 2 panel toggle. When adding a 3rd panel the Javascript fails to displays the correct panel. It could be a simple panel ID issue, but I don't seem to be able to set the ID for toggling with the radio buttons.
Here's the JSFiddle containing a 2 panel and a 3 panel example: http://jsfiddle.net/9z8735h3/5/
Here's the code:
<H4>2 Tab Version Work Great!</H4>
<br />
<div class="container">
<ul class="nav nav-tabs" id="Languages">
<li class="active"><a data-target="#dotNet" data-toggle="tab">.NET</a></li>
<li><a data-target="#PHP" data-toggle="tab">PHP</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="dotNet">
<!--NAV TAB CONTENT SELECTION-->
<form name="NetVersion">
<input type="radio" id="Net40" name="thing" value="valuable" data-id="Net40" checked="checked" />
<label for="Net40">4.0</label>
|
<input type="radio" id="Net56" name="thing" value="valuable" data-id="Net56" />
<label for="Net56">5.6</label>
</form>
<hr />
<!--NAV TAB CONTENT SELECTION-->
<div id="Net40View" class="col-lg-12 active">
<div class="col-md-6 border-green">.NET 4.0 Left</div>
<div class="col-md-6 border-red">.NET 4.0 Right</div>
</div>
<div id="Net56View" class="col-lg-12 none">
<div class="col-md-6 border-green active">.NET 5.6 Left</div>
<div class="col-md-6 border-blue">.NET 5.6 Right</div>
</div>
</div>
<div class="tab-pane fade in" id="PHP">
<h2>Some content here</h2>
</div>
</div>
</div>
<br />
<hr />
<H4>But this 3 Tab Version Breakdows</H4>
<p>I would to be able to add 3 or more radio buttons and maintain the same experience as compared to the 2 tabs above.
</p>
<br />
<div class="container">
<ul class="nav nav-tabs" id="Languages">
<li class="active"><a data-target="#dotNet" data-toggle="tab">.NET</a></li>
<li><a data-target="#PHP" data-toggle="tab">PHP</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="dotNet">
<!--NAV TAB CONTENT SELECTION-->
<form name="NetVersion">
<input type="radio" id="Net40" name="thing" value="valuable" data-id="Net40" checked="checked" />
<label for="Net40">4.0</label>
|
<input type="radio" id="Net56" name="thing" value="valuable" data-id="Net56" />
<label for="Net56">5.6</label>
|
<input type="radio" id="Net6" name="thing" value="valuable" data-id="Net6" />
<label for="Net6">6.0</label>
</form>
<hr />
<!--NAV TAB CONTENT SELECTION-->
<div id="Net40View" class="col-lg-12 active">
<div class="col-md-6 border-green">.NET 4.0 Left</div>
<div class="col-md-6 border-red">.NET 4.0 Right</div>
</div>
<div id="Net56View" class="col-lg-12 none">
<div class="col-md-6 border-green active">.NET 5.6 Left</div>
<div class="col-md-6 border-blue">.NET 5.6 Right</div>
</div>
<div id="Net6View" class="col-lg-12 none">
<div class="col-md-6 border-green active">.NET 6.0 Left</div>
<div class="col-md-6 border-green">.NET 6.0 Right</div>
</div>
</div>
<div class="tab-pane fade in" id="PHP">
<h2>Some content here</h2>
</div>
</div>
</div>
I would appreciate any help with this issue as I am a newbie in Javascript. Thanks in advance for any help!
Part of it is an element id issue. Though some would argue differently, all element id names should be unique, or the HTML is invalid. The current code contains multiple elements with the same id name. The second issue is, though the .toggle() call works when you have two elements, when you have three elements, you are going to end up toggling two of the elements to visible, when they are hidden, and one that is currently visible to hidden; hence, you need to be more specific when setting the elements as visible or hidden. Tweaked your current example to one that works with both 2 and 3 radio sets:
<!doctype html>
<html class="no-js" lang="en">
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(function (){
$('input[name=version-two-tab]:radio').change(function(event) {
$('#Net40View-two-tab').toggle();
$('#Net56View-two-tab').toggle();
});
$('input[name=version-three-tab]:radio').change(function(event) {
console.log(event);
if ($(this).data('id') === 'Net40-three-tab') {
$('#Net40View-three-tab').show();
$('#Net56View-three-tab').hide();
$('#Net6View-three-tab').hide();
}
if ($(this).data('id') === 'Net56-three-tab') {
$('#Net40View-three-tab').hide();
$('#Net56View-three-tab').show();
$('#Net6View-three-tab').hide();
}
if ($(this).data('id') === 'Net6-three-tab') {
$('#Net40View-three-tab').hide();
$('#Net56View-three-tab').hide();
$('#Net6View-three-tab').show();
}
});
});
</script>
<style>
.none {
display: none;
}
.border-red {
border: solid 1px red;
border-radius: 5px;
padding: 5px;
}
.border-blue {
border: solid 1px blue;
border-radius: 5px;
padding: 5px;
}
.border-green {
border: solid 1px green;
border-radius: 5px;
padding: 5px;
}
</style>
<title>Toggle Panels Failure Using Radio Buttons</title>
</head>
<body>
<h4>2 Radio Version</h4>
<ul class="nav nav-tabs" id="Languages-two-tab">
<li class="active"><a data-target="#dotNet-two-tab" data-toggle="tab">.NET</a></li>
<li><a data-target="#PHP-two-tab" data-toggle="tab">PHP</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="dotNet-two-tab">
<form>
<input checked data-id="Net40-two-tab" id="Net40-two-tab" name="version-two-tab" type="radio">
<label for="Net40-two-tab">4.0</label> |
<input data-id="Net56-two-tab" id="Net56-two-tab" name="version-two-tab" type="radio">
<label for="Net56-two-tab">5.6</label>
</form>
<hr>
<div class="col-lg-12 active" id="Net40View-two-tab">
<div class="col-md-6 border-green">.NET 4.0 Left</div>
<div class="col-md-6 border-red">.NET 4.0 Right</div>
</div>
<div class="col-lg-12 none" id="Net56View-two-tab">
<div class="col-md-6 border-green">.NET 5.6 Left</div>
<div class="col-md-6 border-blue">.NET 5.6 Right</div>
</div>
</div>
<div class="tab-pane fade in" id="PHP-two-tab">
<h2>Some content here</h2>
</div>
</div>
<hr>
<h4>3 Radio Version</h4>
<ul class="nav nav-tabs" id="Languages-three-tab">
<li class="active"><a data-target="#dotNet-three-tab" data-toggle="tab">.NET</a></li>
<li><a data-target="#PHP-three-tab" data-toggle="tab">PHP</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="dotNet-three-tab">
<form>
<input checked data-id="Net40-three-tab" id="Net40-three-tab" name="version-three-tab" type="radio">
<label for="Net40-three-tab">4.0</label> |
<input data-id="Net56-three-tab" id="Net56-three-tab" name="version-three-tab" type="radio">
<label for="Net56-three-tab">5.6</label> |
<input data-id="Net6-three-tab" id="Net6-three-tab" name="version-three-tab" type="radio">
<label for="Net6-three-tab">6.0</label>
</form>
<hr>
<div class="col-lg-12 active" id="Net40View-three-tab">
<div class="col-md-6 border-green">.NET 4.0 Left</div>
<div class="col-md-6 border-red">.NET 4.0 Right</div>
</div>
<div id="Net56View-three-tab" class="col-lg-12 none">
<div class="col-md-6 border-green">.NET 5.6 Left</div>
<div class="col-md-6 border-blue">.NET 5.6 Right</div>
</div>
<div id="Net6View-three-tab" class="col-lg-12 none">
<div class="col-md-6 border-green">.NET 6.0 Left</div>
<div class="col-md-6 border-green">.NET 6.0 Right</div>
</div>
</div>
<div class="tab-pane fade in" id="PHP-three-tab">
<h2>Some content here</h2>
</div>
</div>
<hr>
</body>
</html>
I can't get my content to fit in my slideout footer. I'm not sure why this is happening. I'm not sure if I have to add it to the JavaScript.
I added the #slideFootercontent to the beginning to everything that I want in the footer, and it's still not working. To be clear, I want the content to slideout with the slideout footer.
I created a codepen.io
<footer>
<div class="navbar-fixed-bottom">
<div id="footerSlideContainer">
<div id="footerSlideButton"></div>
<div id="footerSlideContent" class="container ">
<div class="row">
<div class="container">
<div class="row">
<br>
<hr>
<div class="col-lg-4">
<h3>Latest Tweets
</h3>
<div id="example1"></div>
<h4>Watch me on Periscope</h4>
#Erica2385
</div>
<!-- col -->
<div class="col-lg-4 border">
</div>
<!-- col -->
<div class="col-lg-4">
<h3> Subscribe
</h3>
<p>Subscribe for the latest newsletters and updates</p>
<div id="mc_embed_signup" class="mailchimp">
<form action="..." method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate form-inline" target="_blank" novalidate>
<div class="form-group">
<input type="email" value="" name="EMAIL" class="required email form-control" id="mce-EMAIL" placeholder="Enter email">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn__bottom--border mailchimp__btn" data-style="shrink" data-horizontal>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<div class="" style="position: absolute; left: -5000px;"><input type="text" name="..." value=""></div>
</form>
<span class="form_nospam">No spam</span>
</div>
<!--End mc_embed_signup-->
</div>
<!-- col -->
</div>
<!-- row -->
</div>
<!-- container -->
<hr class="container">
<div class="container">
<i class="fa fa-facebook fa-2x"></i>
<i class="fa fa-twitter fa-2x"></i>
<i class="fa fa-soundcloud fa-2x"></i>
<div class="pull-right">
<iframe width="100" height="20" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/231337268&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
The problem is that you are styling #footerSlideContainer and #footerSlideContent with position:fixed (that prevents the content from being hidden).
Move the button (#footerSlideButton) outside of #footerSlideContainer, so it shows while that container is hidden and then style the rest appropriately. Check your modified codepen
Note that I changed a few things here and there as you had bad selectors that made some rules useless and also values that created problems.
Essentially, the issue is that the drop down that's created with .ui.inline.dropdown is appearing beneath the rest of the fields in the code below it. Both of which are in an accordion.
My first instinct was to just give the drop down a high z-index and the inputs a lower z-index, but this doesn't appear to have any effect on the issue.
This is the html:
<div class="ui accordion">
<div class="title">
<i class="dropdown icon"></i>
Advanced
</div>
<div class="content">
<h4>
Results match
<div class="ui inline dropdown">
<div class="text">any</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="active item" data-text="any">Any</div>
<div class="item" data-text="all">All</div>
<div class="item" data-text="none">None</div>
</div>
</div>
of the fields below.
</h4>
<div class="field">
<label for="firstName">Name</label>
<div class="two fields">
<div class="field">
<input type="text" class="form-control" id="firstName" autocomplete="off" placeholder="First Name">
</div>
<div class="field">
<input type="text" class="form-control" id="firstName" autocomplete="off" placeholder="Last Name">
</div>
</div>
</div>
</div>
</div>
...and this is how I'm initializing the drop down and accordion:
$( '.ui.accordion' ).accordion();
$( '.ui.dropdown' ).dropdown();