With JQM, I am trying to achieve the following header design
|[Home] Company------------------------------[Search][Filter]
[list of items]
Home button and company tille left aligned and the Search and Filter right aligned.
When the user clicks on the search icon, I want the following search bar to appear between the header and the list of items
<div data-role="fieldcontain">
<label for="search">Search Input:</label>
<input id="search-tickets" type="search" name="search-mini" id="search-mini" data-mini="true" />
</div>
JQM docs guided me to collapsible headers. While this is good, its incredibly hard to accommodate other icons like the home, company text and filter in the same header if it is marked collapsible.
Is there any alternative to collapsible headers that I can use and still maintain status quo on the header?
The trickiest part is the header button/text alignment (please test my solution in all browsers). For the search bar I would just hide/show the main element on search button click.
Code -:
$(document).on("click", "#search-button", function(event)
{
$("#searchtickets").toggle();
});
.company
{
display: table-cell;
padding-left: 3em;
}
.spacerright
{
margin-right: 50px !important;
}
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div data-role="page">
<div data-role="header">
<h1 class="company">Company</h1>
<a class="ui-btn-left" data-iconpos="notext" href="#panel" data-role="button" data-icon="home"></a>
<a class="ui-btn-right spacerright" href="#page-new-ticket" id="search-button" data-role="button" data-icon="search" data-iconpos="notext" data-inline="true"></a>
<a class="ui-btn-right" href="#page-new-ticket" id="btn-new-ticket" data-role="button" data-icon="plus" data-iconpos="notext" data-inline="true"></a>
</div>
<div data-role="content">
<div data-role="fieldcontain" id="searchtickets" style="display:none;padding-bottom:1em;">
<label for="search">Search Input:</label>
<input id="search-tickets" type="search" name="search-mini" id="search-mini" data-mini="true" />
</div>
<ul data-role="listview">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
</div>
I think u need not any JS or css library for this, u can do it with only some lines of pure CSS code ( like this tutorial ) -
body {
background: #fff;
color: #666;
font: 85%/140% Arial, Helvetica, sans-serif;
width: 800px;
max-width: 96%;
margin: 0 auto;
}
a {
color: #69C;
text-decoration: none;
}
a:hover {
color: #F60;
}
h1 {
font: 1.7em;
line-height: 110%;
color: #000;
}
p {
margin: 0 0 20px;
}
/* reset webkit search input browser style */
input {
outline: none;
}
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none; /* remove the search and cancel icon */
}
/* search input field */
input[type=search] {
background: #ededed url(http://webdesignerwall.com/demo/expandable-search-form/images/search-icon.png) no-repeat 9px center;
border: solid 1px #ccc;
padding: 9px 10px 9px 32px;
width: 55px;
-webkit-border-radius: 10em;
-moz-border-radius: 10em;
border-radius: 10em;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
input[type=search]:focus {
width: 130px;
background-color: #fff;
border-color: #6dcff6;
-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
box-shadow: 0 0 5px rgba(109,207,246,.5);
}
/* placeholder */
input:-moz-placeholder {
color: #999;
}
input::-webkit-input-placeholder {
color: #999;
}
/* demo B */
#demo-b input[type=search] {
width: 15px;
padding-left: 10px;
color: transparent;
cursor: pointer;
}
#demo-b input[type=search]:hover {
background-color: #fff;
}
#demo-b input[type=search]:focus {
width: 130px;
padding-left: 32px;
color: #000;
background-color: #fff;
cursor: auto;
}
#demo-b input:-moz-placeholder {
color: transparent;
}
#demo-b input::-webkit-input-placeholder {
color: transparent;
}
<h3>Try this</h3><br/>
<form>
<input type="search" placeholder="Search">
</form>
<h3>Or this</h3>
<form id="demo-b">
<input type="search" placeholder="Search">
</form>
And u can also do this by this way of using a small JS-
$(function() {
$('.srch-button').click(function(){
var $wrapper = $('.srch-wrapper'),
isOpen = $wrapper.hasClass('open');
$wrapper.toggleClass('open')
.find('.srch-input')[isOpen ? 'blur' : 'focus']();
// remove this - onyl for demo
return false;
});
})
body {
padding: 10px 20px;
background-color: #343434;
color: #fff;
}
.center {
padding: 60px;
max-width: 400px;
margin-left: 200px;
}
.srch-form {
position: relative;
width: 44px;
}
.srch-wrapper {
position: absolute;
top: 0;
right: 0;
width: 44px;
height: 40px;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.srch-wrapper.open {
width: 200px;
}
.srch-input {
position: relative;
background-color: transparent;
height: 44px;
line-height: 26px;
padding: 5px 10px 5px 32px;
box-sizing: border-box;
border: 2px solid #ddd;
border-radius: 100px;
margin: 0;
width: 100%;
}
.srch-input:focus {
outline: none;
border-color: #aaa;
}
.srch-button {
position: absolute;
top: 0;
left: 0;
border: 0;
padding: 0;
margin: 0;
background-color: transparent;
color: #ddd;
width: 44px;
height: 44px;
text-align: center;
}
.srch-button:focus {
outline: none;
}
.srch-input:focus + .srch-button,
.srch-button:hover {
color: #aaa;
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.js"></script>
<div class="center">
<form action="" class="srch-form">
<div class="srch-wrapper open">
<input type="text" class="srch-input" placeholder="Search..." />
<button class="srch-button" type="submit">
<em class="icon-search"></em>
</button>
</div>
</form>
</div>
Related
$(document).ready(function() {
$('#btn').click(function() {
var mylist = $('#input').val();
$('#myUL').prepend('<li><input type="checkbox" id = "check" name="interest" onclick="toggleBoxVisibility()">' + mylist + '</li>');
});
});
function toggleBoxVisibility() {
if (document.getElementById("check").checked == true) {
document.getElementsByTagName("LI").style.visibility = "visible";
} else {
document.getElementById("myUL").style.visibility = "hidden";
}
}
#container {
text-align: center;
margin: auto;
width: 400px;
border: 1px solid #ccc;
}
ul li {
cursor: pointer;
position: relative;
padding: 12px 8px 12px 40px;
background: #eee;
font-size: 18px;
transition: 0.2s;
/* make the list items unselectable
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; */
}
ul li.checked {
background: #888;
color: #fff;
text-decoration: line-through;
}
ul li.checked::before {
content: '';
position: absolute;
border-color: #fff;
border-style: solid;
border-width: 0 2px 2px 0;
top: 10px;
left: 16px;
transform: rotate(45deg);
height: 15px;
width: 7px;
}
.addBtn {
padding: 10px;
width: 25%;
background: #d9d9d9;
color: #555;
float: left;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
border-radius: 0;
}
input {
margin: 0;
border: none;
border-radius: 0;
width: 75%;
padding: 10px;
float: left;
font-size: 16px;
}
.header:after {
content: "";
display: table;
clear: both;
}
#myUL {
width: 50%;
margin-left: auto;
margin-right: 27%;
}
.claim {
position: absolute;
right: 0;
top: 0;
}
#check {
margin-right: -190px;
margin-left: -190px;
margin-top: 9px;
}
<html>
<head>
<title>Login </title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<body>
<div class="hero">
<div class="container">
<h1 class="display-2 text-center">To-Do</h1>
<div class="row">
<form id="form" class="col-lg-6 col-8 mx-auto">
<div class="input-group">
<input id="input" class="form-control" placeholder="Enter a new task here">
<span>
<button id="btn" type="button" class="btn btn-primary" >Add</button>
</span>
</div>
</div>
<ul id="myUL">
<li>Hit the gym </li>
<li class="checked">Pay bills</li>
<li>Meet George</li>
<li>Buy eggs</li>
</ul>
<div class="row">
<button id="btnClr" type="button" class="btn btn-primary mx-auto btnHide"> Remove Complete </button>
</div>
</form>
</div>
</div>
</body>
</html>
**I want to run a line through the text once it is selected and I am not sure how to do that. I have pasted most of my code above and I tried to toggle the visiblity of the list in order to make sure if the checking function works or not. The checking function works. I just want some ideas of how should i strike through the text once the checkbox next to the box is selected. **
you can refer this article to done this task here. Anyway I try to use it and it works fine. Hope this one can give you some insight.
Add label on your jQuery code, <label>' + mylist + '</label> and looks something like this:
$(document).ready(function() {
$('#btn').click(function() {
var mylist = $('#input').val();
$('#myUL').prepend('<li><input type="checkbox" id = "check" name="interest" onclick="toggleBoxVisibility()"><label>' + mylist + '</label></li>');
});
});
And add this line to your CSS:
input:checked+label {
text-decoration: line-through;
text-decoration-color: #fff;
}
Somehow when I try to use JS to show hidden content (the login formular when clicking the login-button) my formular gets deformed. Espescially the "register" Button is too long and I can't locate my problem properly.
When I'm deleting the JS and the display:none attribute in #login-fenster it shows up as I wanted to. I've tried to copy the neccessary code to JSfiddle, I hope it worked. Until now I havn't any clue about responsive design so you have to max the output window i think. sorry for that!
I have deleted diverse parts of the code and tried to locate the problem but only found a connection to JS
https://jsfiddle.net/vz2jfmkc/1/
function myFunction() {
var x = document.getElementById("login-fenster");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
body, main{
background-color: #000000;
overflow-x: hidden;
}
nav {
background: #0d0d0d;
width: 100vw;
top: 0;
}
.nav {
display: flex;
justify-content: flex-end;
list-style: none;
height: 3vw;
text-align: center;
align-items: center;
padding: 0 2vw 0 0;
}
nav ul {
padding: 0px;
margin: 0;
right: 0;
}
nav ul li a {
color: #fff;
background-color: #262626;
text-decoration: none;
padding: 12px;
font-size: 1.2rem;
padding-right: 10px;
border-radius: 5px 5px;
border: #262626 1px solid;
transition: 0.5s;
transition: background 1s ease-in-out;
}
nav ul li a:hover {
color: #ffffff;
text-decoration: none;
font-weight: 100;
background: linear-gradient(#262626, #595959);
}
nav button {
color: #fff;
background-color: #262626;
text-decoration: none;
padding: 12px;
font-size: 1.1rem;
padding-right: 10px;
border-radius: 5px 5px;
border: #262626 1px solid;
transition: 0.5s;
transition: background 1s ease-in-out;
}
#login {
margin-right: 1rem;
transition: transform 0.1s ease-in-out;
}
#login:active {
transform: scale(0.9);
}
.news {
margin-right: 1rem;
transition: transform 0.1s ease-in-out;
}
.news:active {
transform: scale(0.9);
}
.tests {
margin-right: 1rem;
transition: transform 0.1s ease-in-out;
}
.tests:active {
transform: scale(0.9);
}
.community {
margin-right: 1rem;
transition: transform 0.1s ease-in-out;
}
.community:active {
transform: scale(0.9);
}
.index {
margin-right: 1rem;
transition: transform 0.1s ease-in-out;
}
.index:hover {
transform: scale(0.9);
}
.search {
margin-right: 1rem;
}
#login-fenster {
right: 0;
margin-top: 0rem;
margin-right: 19rem;
z-index: 100;
justify-content: center;
align-content: center;
align-items: center;
display: inline-flex;
flex-direction: column;
height: 30vh;
width: 18vw;
background-color: black;
color: white;
position: absolute;
border: 3px solid white;
border-radius: 20px 20px;
}
.login-form {
margin-top: 10px;
}
#login-fenster input[type="text"]{
font-size: 1.3rem;
border-radius: 8px 8px;
}
#login-fenster input[type="password"]{
font-size: 1.3rem;
border-radius: 8px 8px;
}
.register {
margin-top: 10px;
background: #262626;
border: 1px solid white;
border-radius: 15px 15px;
transition: transform all 0.2s;
}
.register a {
text-decoration: none;
color: white;
font-size: 1.3rem;
transition: transform all 0.2s;
}
.register:active {
transform: scale(0.95);
}
button {
cursor: pointer;
color: white;
background-color: #262626;
padding: 0.5rem;
border-radius: 15px 15px;
border: 1px solid white;
font-size: 1rem;
transition: transform 0.2s;
}
button:active {
transform: scale(0.95);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Koop_bude</title>
<link rel="stylesheet" href="stylesheets/styles.css" type="text/css" media="screen" />
</head>
<header>
<nav>
<ul class="nav">
<button id="login" onclick="myFunction()">Login</button>
<li class="news">News</li>
<li class="tests">Tests</li>
<li class="community">Community</li>
<li class="search"><input type="search" placeholder="Suche..." /></li>
</ul>
</nav>
<div id="login-fenster" style="display:none;">
<input class="login-form" type="text" placeholder="Username" name="username" required />
<input class="login-form" type="password" placeholder="Passwort" name="password" required />
<button class="login-form" type="submit">Login</button>
<label>
<input class="login-form" type="checkbox" checked="checked" name="remember">Eingeloggt bleiben
</label>
<div id="forgot-password">
<button class="forgot-password-button">Passwort vergessen?</button>
</div>
<div class="register">Registrieren
</div>
</div>
</header>
<body>
<script>
function myFunction() {
var x = document.getElementById("login-fenster");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
I want the content to show up on a line under the login button. I gave that content specific parameters which looked good to me for a newbie and I don't want JS to deform it.
Thanks for that JSFiddle - though I'm still a little confused about what you're hoping to accomplish. From what I understand, your issue is more of a CSS issue than a JavaScript issue. If your issue is that the white border cuts through your content:
then removing
#login-fenster {
...etc...
height: 30vh; <----- Remove this to keep everything inside regarding Y-Axis
width: 18vw; <----- Remove this to keep everything inside regarding X-Axis
...etc...
}
and now all of your items will always be inside your white border
If you want the different input fields to be on different lines, just add a <br /> tag between your inputs:
<input class="login-form" type="text" placeholder="Username" name="username" required />
<br />
<input class="login-form" type="password" placeholder="Passwort" name="password" required />
On the other hand, if you really want the boxes to grow/shrink, and you want to leave width: 18vw; (I still highly recommend you get rid of the height: 30vh;... that's not helping you at all) then just set the width attributes to be 100% of the parent-div (the white box).
<input style="width: 100%;" class="login-form" type="text" placeholder="Username" name="username" required />
<br />
<input style="width: 100%;" class="login-form" type="password" placeholder="Passwort" name="password" required />
I'm attempting to make a side nav on my site which adds the "active" class to it's four buttons but I cannot seem to make it work properly.
I've successfully added waypoints to the code but they always seem to be a little off and it takes a bit of extra scrolling from the user to activate the waypoint. I've also tried to follow the {offset} rules in the documentation but to no veil. They either stop working properly from last to first or they stop doing so from first to last.
In order to make the sidenav work, I've split the page in columns, as shown in the CSS below. Feel free to provide insight on the code, as this is a learning exercise and I KNOW my code is pretty dirty at the moment (particularly Javascript)
The side nav:
<div class="sidebar verticalized" id="sidebar-verticalized">
<ul id="sidenav" class="side nav-fixed hide-on-med-and-down">
<li class="side-link">
<a class="side-link-first link1" onclick="clickOne()" href="#">01</a>
</li>
<li class="side-link">
02
</li>
<li class="side-link">
03
</li>
<li class="side-link">
04
</li>
</ul>
</div>
The CSS:
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space */
background: transparent; /* optional: just make scrollbar invisible */
}
.page{
display: grid;
grid-template-columns: 300px auto;
}
.sidebar{
position:fixed;
width:300px;
}
.main{
grid-column-start:2;
}
.verticalized {
margin: 0px;
padding:0px;
float: left;
top: 50%;
transform: translateY(-50%) translateX(-50%);
left:9%;
}
my mess of JS (each section is declared below):
var $section1 = $('.header');
var $section2 = $('.portfolio');
var $section3 = $('.what-we-do');
var $section4 = $('.contact');
var $link1 = $('.link1');
var $link2 = $('.link2');
var $link3 = $('.link3');
var $link4 = $('.link4');
$section1.waypoint(function (){
$link1.addClass('active');
$link2.removeClass('active');
$link3.removeClass('active');
$link4.removeClass('active');
});
$section2.waypoint(function(){
$link1.removeClass('active');
$link2.addClass('active');
$link3.removeClass('active');
$link4.removeClass('active');
});
$section3.waypoint(function(){
$link1.removeClass('active');
$link2.removeClass('active');
$link3.addClass('active');
$link4.removeClass('active');
});
$section4.waypoint(function(){
$link1.removeClass('active');
$link2.removeClass('active');
$link3.removeClass('active');
$link4.addClass('active');
});
What I've tried so far:
Offset: bottom-in-view (sections are sometimes too large and therefore the old active element remains)
Offset: +/- x% (This fixes the issue from one end but not the other one: I could be going from 1 to 4 on links and it works, but 4 to 1 is broken and vice versa)
Any and all advice/tips are welcome. I'm trying to imitate the bootstrap navbar behaviour with active items for each section.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
#import url('https://fonts.googleapis.com/css?family=Varela+Round');
html, body {
overflow-x: hidden;
height: 100%;
}
body {
background: #fff;
padding: 0;
margin: 0;
font-family: 'Varela Round', sans-serif;
}
.header {
display: block;
margin: 0 auto;
width: 100%;
max-width: 100%;
box-shadow: none;
background-color: #FC466B;
position: fixed;
height: 60px!important;
overflow: hidden;
z-index: 10;
}
.main {
margin: 0 auto;
display: block;
height: 100%;
margin-top: 60px;
}
.mainInner{
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.mainInner div{
display:table-cell;
vertical-align: middle;
font-size: 3em;
font-weight: bold;
letter-spacing: 1.25px;
}
#sidebarMenu {
height: 100%;
position: fixed;
left: 0;
width: 250px;
margin-top: 60px;
transform: translateX(-250px);
transition: transform 250ms ease-in-out;
background:#414956;
}
.sidebarMenuInner{
margin:0;
padding:0;
border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li{
list-style: none;
color: #fff;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li span{
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.50);
}
.sidebarMenuInner li a{
color: #fff;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}
input[type="checkbox"]:checked ~ #sidebarMenu {
transform: translateX(0);
}
input[type=checkbox] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
}
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
left: 15px;
height: 22px;
width: 22px;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: #fff;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px;
}
</style>
<body>
<div class="header"></div>
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div id="sidebarMenu">
<ul class="sidebarMenuInner">
<li>Jelena Jovanovic</li>
<li>Company</li>
<li>Instagram</li>
<li>Twitter</li>
<li>YouTube</li>
<li>Linkedin</li>
</ul>
</div>
<div id='center' class="main center">
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
</div>
</body>`enter code here`
I am having trouble replacing the html.
I want the whole "expand" div output to be replaced, as in the h3 and li texts will change according to which button the user presses.
As of now, the code does work to a point, the h3 changes, but rather than typing the actual text into my javascript, I want to be able to call the id and change it. Another problem is that pressing the prev button doesn't do anything yet. I also want the list of answers to change when clicking next.
Desired Outcome
when user clicks on next button, html is replaced with next question.
when user clicks on prev button, html is replaced with previous question.
function nextButton() {
var str = document.getElementById("expand").innerHTML;
var res = str.replace("which icon is used for GitHub?", "what is this?");
document.getElementById("expand").innerHTML = res;
}
var iconquiz = [
{
iq2: "<h3>what is this?</h3>",
ia2: "<li>this is something</li><li>this is something2</li>"
},
{
iq3: "<h3>what is next></h3>",
ia3: "<li>something</li><li>something else</li>"
}
];
/*************
MAIN STUFFF
*************/
body {
background: #CCC;
font-family: 'Varela Round', sans-serif;
}
.collapse {
color: #fff;
background: #494949;
border-radius: 10px;
width: 300px;
margin: 20px auto;
padding: 10px 0;
box-shadow: 0 3px 5px rgba(0,0,0,0.3);
}
/*************
QUIZ BOXES
*************/
h2 {
text-align: center;
}
input {
display: none;
visibility: hidden;
}
label {
width: 90px;
margin: 0 auto;
margin-bottom: 10px;
display: block;
text-align: center;
color: #fff;
background-color: #4ada95;
border-radius: 5px;
}
label:hover {
color: #494949;
}
label::before {
}
/************
QUIZ CONTENT
************/
h3 {
background-color: #707070;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
margin: 0;
padding: 10px;
}
li {
list-style-type: none;
padding: 10px;
margin: 0 auto;
}
button {
color: #fff;
background-color: #707070;
border-radius: 5px;
border-style: solid;
border-color: #707070;
margin: 5px;
}
/***********
QUIZES
***********/
#expand {
height: 225px;
overflow: hidden;
transition: height 0.5s;
background-color: #4ada95;
color: #FFF;
width: 250px;
margin: 0 auto;
text-align: center;
border-radius: 10px;
}
/**********
FIRST QUIZ
**********/
#toggle:checked ~ #expand {
height: 0px;
}
#toggle:checked ~ label::before {
display: hidden;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<div class="collapse">
<h2>Icon Quiz</h2>
<input id="toggle" type="checkbox" checked>
<label for="toggle">take quiz</label>
<div id="expand">
<section>
<h3>which icon is used for GitHub?</h3>
<li><i class="fa fa-gitlab" aria-hidden="true"></i></li>
<li><i class="fa fa-grav fa-lg" aria-hidden="true"></i></li>
<li><i class="fa fa-github-alt fa-lg" aria-hidden="true"></i></li>
</section>
<button type="button">prev</button><button onclick="nextButton()" type="button">next</button>
</div>
</div>
I haven't done all the cleanup here, but I think you'll get the idea from what's below. Note that I gave your <h3> element an ID so now you can just replace the raw text instead of trying to insert an HTML element into there. You'll have to work through how the answers are displayed, etc.
You'll also need to check the bounds of your array (list of questions) so your index doesn't go below zero or above the max index (length minus 1).
var index = 0;
function nextButton() {
index++;
document.getElementById("questionHere").innerHTML = iconquiz[index].iq;
}
function prevButton() {
index--;
document.getElementById("questionHere").innerHTML = iconquiz[index].iq;
}
var iconquiz = [
{
iq: "question number one",
ia: "<li>this is something</li><li>this is something2</li>"
},
{
iq: "question number two",
ia: "<li>something</li><li>something else</li>"
},
{
iq: "question number three",
ia: "<li>something</li><li>something else</li>"
}
];
/*************
MAIN STUFFF
*************/
body {
background: #CCC;
font-family: 'Varela Round', sans-serif;
}
.collapse {
color: #fff;
background: #494949;
border-radius: 10px;
width: 300px;
margin: 20px auto;
padding: 10px 0;
box-shadow: 0 3px 5px rgba(0,0,0,0.3);
}
/*************
QUIZ BOXES
*************/
h2 {
text-align: center;
}
input {
display: none;
visibility: hidden;
}
label {
width: 90px;
margin: 0 auto;
margin-bottom: 10px;
display: block;
text-align: center;
color: #fff;
background-color: #4ada95;
border-radius: 5px;
}
label:hover {
color: #494949;
}
label::before {
}
/************
QUIZ CONTENT
************/
h3 {
background-color: #707070;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
margin: 0;
padding: 10px;
}
li {
list-style-type: none;
padding: 10px;
margin: 0 auto;
}
button {
color: #fff;
background-color: #707070;
border-radius: 5px;
border-style: solid;
border-color: #707070;
margin: 5px;
}
/***********
QUIZES
***********/
#expand {
height: 225px;
overflow: hidden;
transition: height 0.5s;
background-color: #4ada95;
color: #FFF;
width: 250px;
margin: 0 auto;
text-align: center;
border-radius: 10px;
}
/**********
FIRST QUIZ
**********/
#toggle:checked ~ #expand {
height: 0px;
}
#toggle:checked ~ label::before {
display: hidden;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<div class="collapse">
<h2>Icon Quiz</h2>
<input id="toggle" type="checkbox" checked>
<label for="toggle">take quiz</label>
<div id="expand">
<section>
<h3 id="questionHere">which icon is used for GitHub?</h3>
<li><i class="fa fa-gitlab" aria-hidden="true"></i></li>
<li><i class="fa fa-grav fa-lg" aria-hidden="true"></i></li>
<li><i class="fa fa-github-alt fa-lg" aria-hidden="true"></i></li>
</section>
<button type="button" onclick="prevButton()">prev</button><button onclick="nextButton()" type="button">next</button>
</div>
</div>
I have a series of cards in the same page. Below is the example the example below where I have put for this example only 1 card (but there are many more).
I fail to use jquery 'closest' or 'siblings' or something similar to do the following: when a user click on a card it collapses and the javascript kicks in to show the content. I need at that moment to replace the "plus icon" by a "minus icon". (only on this specific card so not using at any point a id or class containing the number of the card '354' in the example below)
Jsfiddle Demo
The Javascript should target the icon but it does not change it when I click
If you have trouble making appear the content, do not worry, it's not the focus of the question. I just want to know how to target the icon and change into to glyphicon minus.
HTML
<div id="operation-zone">
<ul class="cards-list">
<li class="card 354" data-opcode="CATIMINI26">
<div class="card-content" id="accordion_354">
<a class="card-detail-opener" id="BtnHomeOperationExpand_53313" role="button" data-toggle="collapse" data-parent="#accordion_354" href="#collapseOne_354" aria-expanded="false" aria-controls="collapseOne_354">
<i class="glyphicon glyphicon-plus detail-icon_354"></i>
</a>
<div class="card-image card-lazy-preloader" id="accordion2">
<a href="/campaigns/xxxxx">
</a><figure><a href="/campaigns/xxxxxx">
<!-- responsive image -->
<img style="opacity: 1; display: block;" id="HPImageBanner_354" src="http://vp-eu.scene7.com/is/image/vpeu/0/00_54093_FR_brandvisualnbrandvisualfr">
</figure>
</div>
</div>
<div id="collapseOne_354" class="smux details details_354 panel-collapse collapse left-aligned" role="tabpanel" aria-labelledby="headingOne" style="height: auto;">
<div id="DivHomeOperationDates" class="dates">
Jusqu'au <span class="brand-color">mercredi 06/04 6h</span>
</div>
<div id="DivHomeOperationDescription_52850" class="description">
operation in venicesqqsqssqsqsqsqsqsqss qui ravira les petits et les grands ! Retrouvez Les Schtroumpfs, Les Rebelles de la Foret, Hotel Transylvanie et bien d'autres encore...
</div>
<div class="card-info-actions">
<a class="btn btn-lg btn-primary" href="/campaigns/operation-in-venicesqqsqssqsqsqsqsqsqss">go Now ></a>
</div>
</div>
<!-- end of campaign card details on 1-column view-->
</li>
</ul>
</div>
Javascript
$('#collapseOne_354').on('shown.bs.collapse', function () {
$(".glyphicon").removeClass("glyphicon-plus").addClass("glyphicon-minus");
});
$('#collapseOne_354').on('hidden.bs.collapse', function () {
$(".glyphicon").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});
CSS
.cards-list {
list-style: none;
display: block;
height: auto;
}
.card {
text-align: left;
width: 100%;
border-bottom: 1px solid black;
position: relative;
}
.card-content {
background: #fff;
position: relative;
}
.card-image {
vertical-align: top;
img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
color: green;
}
position: relative;
line-height: 0;
overflow: hidden;
padding-bottom: 33.88%;
}
.container .jumbotron {
padding-left: 0px;
padding-right: 0px;
}
.card-detail-opener {
color: green;
font-size: 16px;
text-align: center;
padding-left: 1px;
width: 25px;
height: 25px;
border-radius: 50%;
line-height: 27px;
background: grey;
position: absolute;
z-index: 2;
opacity: .75;
filter: alpha(opacity=75);
bottom: 60%;
right: 30%;
&:hover { background: #7E7E7E; }
&:focus { background: #7E7E7E; }
}
}
.card-detail-opener:link {
color: green;
}
.glyphicon.glyphicon-remove {
color: #333;
&:hover { color: green; }
&:focus { color: green; }
}
.glyphicon.glyphicon-plus {
top:1px;
color: #333;
&:hover { color: #ffffff; }
&:focus { color: #ffffff; }
}
.glyphicon.glyphicon-minus {
top:2px;
padding-right: 2px;//tweak to center
color: #333;
&:hover { color: #ffffff; }
&:focus { color: #ffffff; }
}
// Content of the card details in the 1-column view
.card .details {
padding-top: 10px;
background-color: rgba(255,255,255,1);
}
.details {
padding-left: 1em;
}
.details .dates {
padding-top: 10px;
font-size: .8em;
line-height: 1.6em;
color: #464650;
margin-right: 1em;
background-size: 90px auto !important;
background-repeat: no-repeat !important;
background-position-x: right !important;
background-position-y: 0px !important;
margin-bottom: 8px;
}
.details .baseline {
color: #888;
font-size: 0.75em;
line-height: 0.4em;
}
.details .description {
font-size: .65em;
color: #464650;
line-height: 1.1em;
overflow: hidden;
}
// End of content of the card details in the 1-column view
.card-info-actions {
float: right;
padding: 0 5px 2px 0;
clear: both;
}
//smaller buttons for cards
.card-info-actions .btn-primary {
font-size: 15px;
}
.card-short-info a.dateSales {
color: #464650;
}
.info-overlay {
display:none;
z-index:999;
position:absolute;
height:100%;
width: 100%;
background-color: rgba(255,255,255,.9);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF,endColorstr=#CCFFFFFF)\9";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF,endColorstr=#CCFFFFFF);
transition: all .4s ease-in-out;
border-bottom: 4px solid green;
}
.close-overlay {
float:right;
padding:5px;
}
.info-overlay a {
display: block;
line-height: normal;
text-decoration: none;
cursor: pointer;
}
The ID is wrong collapseOne_354 while you are binding collapseOne
EDIT
I would reach the glyphicon with
var list = $('.cards-list')
$('li', list).click(function(e){
var card=$(this);
$(this).find(".glyphicon").toggleClass("glyphicon-minus").toggleClass("glyphicon-plus");
});