Hi guys I got an issue removing the class attribute from the grand parent of an input.
Here is my html:
<div class="settings">
<div class="settings-content">
<ul class="general-settings">
<li>
<label>Name</label>
<span class="hidden_elm">
<form class="name_form" id="myform" method="post" action="#">
<ul>
<li><label>First</label><input class="input-log" type="text" name="firstname" placeholder="First Name..."></li>
<li><label>Last</label><input class="input-log" type="text" name="lastname" placeholder="Last Name..."></li>
<li><hr></li>
</ul>
<input class="log-btn success-btn" type="submit" value="Save">
<input class="log-btn close_current" type="reset" value="Cancel">
</form>
</span>
</li>
</ul>
</div>
</div>
jQuery:
$(document).ready(function(){
var hide_elm = $('span.hidden_elm');
var clickon_elm = $('ul.general-settings > li');
var ul_backgrounf = $('ul.general-settings');
clickon_elm.on('click',function(){
//remove the class if it exists
$('.show_elm').removeClass('show_elm');
$('.current_elm').removeClass('current_elm');
//add the class attr to the current element
$(this).addClass('current_elm');
$(this).children('span').toggleClass('show_elm');
//$(this).css({'height':'auto'});
});
$('.close_current').on('click',function(){
//$(this).removeClass('current_elm');
$('.current_elm').removeClass('current_elm');
$(this).parent('span').removeClass('show_elm');
});
})
CSS:
div.settings{
margin-top: 10px;
}
ul.general-settings{
width: 100%;
/*padding-top:8px;*/
padding-bottom:8px;
border-top: 1px solid #ccc;
/*background-color: #f2f2f2;*/
/*border-bottom: 1px solid #ccc;*/
}
ul.general-settings > li{
width: auto;
padding: 1px;
margin: 0 auto;
height: 30px;
display: block;
line-height: 1em;
vertical-align: middle;
border-bottom: 1px solid #ccc;
}
/** change style of the li element of the current show_elm **/
li.current_elm{
background-color: #f2f2f2 !important;
height: auto !important;
cursor: default !important;
}
ul.general-settings > li:hover{
cursor: pointer;
background-color: #f2f2f2;
}
ul.general-settings > li > label{
position: relative;
float: left;
width: 20%;
text-align: left;
padding: 10px 5px;
color: #000;
font-size: 1em;
font-weight: 700;
}
ul.general-settings > li > label:hover{
cursor: pointer;
}
/** show the hidden element **/
ul.general-settings > li > span.show_elm{
margin: 0 auto;
padding: 0;
display: inline-block;
width: 70%;
padding: 5px 0;
}
span.hidden_elm{
display: none;
}
span.hidden_elm > form{
margin:0 auto;
padding: 0;
display: inline-block;
}
span.hidden_elm > form > input.log-btn{
top: 0;
right: 0;
float: left;
border: none;
cursor: pointer;
margin: 0 3px 0 0;
}
span.hidden_elm > form > ul{
width: 100%;
}
span.hidden_elm > form > ul > li{
display: block;
margin-bottom: 5px;
text-align: right;
width: 388px;
}
span.hidden_elm > form > ul > li > label{
padding-right: 5px;
}
hr{
background: #d9d9d9;
border-width: 0;
color: #d9d9d9;
height: 1px;
}
so i want to remove the class:current_elm and class:show_elm after i click on the cancel button which is an input:type=reset
Try using parents()
$('.close_current').on('click',function(){
$(this).parents('.current_elm').removeClass('current_elm');
$(this).parents('span').removeClass('show_elm');
});
If I understand what you need, you can try with this:
$( "input:reset" ).on("click", function() {
$(this).parents('span').removeClass("show_elm current_elm");
});
Related
I want to add somethin y input in my ol, i do it,
when i write something in input filed and click add
i create li, then i want to add to li data attribute
which will increment, when will create new li in the picture there is a code[1]: https://i.stack.imgur.com/oAr6V.png
this is what i tried so far (data-id is not adding to newlt created li's):-
$(".add").click(function() {
var $val = $(".taskk");
var value = $val.val();
if(value === "") {
$(".error").text("Fill in the task");
} else {
$(".error").text("");
var newLi = $('<li>' + value + '</li>');
$('.toDo ol').append((newLi));
/*newLi.each(function() {
$(this).attr("data-id", i++);
console.log(i++);
$('.toDo ol').append((newLi));
});
$('.toDo ol').append((newLi)); */
}
})
body {
background-color: #34545E;
}
.wrapper {
max-width: 1200px;
width: 100%;
margin: auto;
}
.flexbox {
display: flex;
justify-content: space-between;
margin-top: 100px;
}
.box {
min-width: 280px;
min-height: 250px;
border: 2px solid transparent;
background-color: grey;
}
h1 {
text-align: center;
background-color: aliceblue;
padding: 5px;
}
form {
display: flex;
flex-direction: column;
margin-top: 40px;
}
input[type="text"] {
height: 80px;
}
input[type="button"], button {
padding: 10px;
width: 100px;
margin-top: 20px;
background-color: #000;
border: 1px solid transparent;
color: #fff;
font-weight: bold;
cursor: pointer;
}
ol {
list-style-position: inside;
}
ol li {
padding: 7px;
margin-top: 2px;
word-wrap: break-word;
}
.toDo ol li {
background-color: #ffffff;
}
.compl ol li {
background-color: #F35369;
}
.draft ol li {
background-color: #ffffff;
color: grey;
opacity: 0.8;
text-decoration: line-through;
}
.delete {
background-color: #000000;
}
.error {
padding-top: 20px;
color: red;
}
.add {
padding: 20px;
background-color: black;
margin-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="flexbox">
<div class="box1">
<h1>To do list</h1>
<div class="box toDo">
<ol>
</ol>
</div>
</div>
<div class="box2">
<h1>Drafts</h1>
<div class="box draft">
<ol>
</ol>
</div>
<button type="submit">Delete</button>
</div>
<div class="box3">
<h1>Add a task</h1>
<div class="box">
<p class="error"></p>
<form action="" method="post">
<input type="text" name="name" placeholder="Description" class="taskk">
<input type="button" name="add" value="Add task" class="add">
</form>
</div>
</div>
</div>
</div>
You can do it like below:-
check pre-existing li length and add 1 to it and add it as data-id of newly created li
var newLi = $('<li data-id="'+($('li').length+1)+'">' + value + '</li>');// check pre-existing `li` length and add 1 to it and add it as data-id of newly created `li`
Working snippet:-
$(".add").click(function() {
var $val = $(".taskk");
var value = $val.val();
if(value === "") {
$(".error").text("Fill in the task");
} else {
$(".error").text("");
var newLi = $('<li data-id="'+($('li').length+1)+'">' + value + '</li>');
$('.toDo ol').append((newLi));
}
});
body {
background-color: #34545E;
}
.wrapper {
max-width: 1200px;
width: 100%;
margin: auto;
}
.flexbox {
display: flex;
justify-content: space-between;
margin-top: 100px;
}
.box {
min-width: 280px;
min-height: 250px;
border: 2px solid transparent;
background-color: grey;
}
h1 {
text-align: center;
background-color: aliceblue;
padding: 5px;
}
form {
display: flex;
flex-direction: column;
margin-top: 40px;
}
input[type="text"] {
height: 80px;
}
input[type="button"], button {
padding: 10px;
width: 100px;
margin-top: 20px;
background-color: #000;
border: 1px solid transparent;
color: #fff;
font-weight: bold;
cursor: pointer;
}
ol {
list-style-position: inside;
}
ol li {
padding: 7px;
margin-top: 2px;
word-wrap: break-word;
}
.toDo ol li {
background-color: #ffffff;
}
.compl ol li {
background-color: #F35369;
}
.draft ol li {
background-color: #ffffff;
color: grey;
opacity: 0.8;
text-decoration: line-through;
}
.delete {
background-color: #000000;
}
.error {
padding-top: 20px;
color: red;
}
.add {
padding: 20px;
background-color: black;
margin-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="flexbox">
<div class="box1">
<h1>To do list</h1>
<div class="box toDo">
<ol>
</ol>
</div>
</div>
<div class="box2">
<h1>Drafts</h1>
<div class="box draft">
<ol>
</ol>
</div>
<button type="submit">Delete</button>
</div>
<div class="box3">
<h1>Add a task</h1>
<div class="box">
<p class="error"></p>
<form action="" method="post">
<input type="text" name="name" placeholder="Description" class="taskk">
<input type="button" name="add" value="Add task" class="add">
</form>
</div>
</div>
</div>
</div>
when one of menus is chosen and option in select tag, apply button can be worked to be placed to be dynamic html element in Panel below. when a user clicks cancel button, that dynamic html element will be deleted.
As for an issue, when a user chooses one menu, dynamic html element will be redundantly placed to be in panels.
For example,
apply menu 2 > create dynamic html element in panel of menu2 > cancel menu 2 > apply menu other menu (3 or 1) > redundantly create dynamic html elements in previous panel of menu 2 and current panel of menu.
How am I able to completely delete dynamic html element when I click cancel button??
$(function() {
$(".section4 ul li:first-child").addClass("on");
//section4 ul li on
$("section.section4 ul li").click(function() {
$(this).addClass("on");
$("section.section4 ul li.on").not(this).removeClass("on");
});
// panel
$(".PaNel").hide();
$(".PaNel:eq(0)").show();
//addEventListner
$(".section4 ul li").click(function() {
$(".PaNel").hide();
$("#tab" + ($(this).index() + 1)).show();
});
//메뉴 선택
$(".section2").find("article").click(function() {
$(this).addClass("On");
$("article.On").not(this).removeClass("On");
});
//비활성신청
$(".btn2").css({
"display": "none"
});
//상단 메뉴
$("article").click(function() {
if ($(this).hasClass("On") && $("#menuSelect option:selected").index() > 0) {
$(".btn1").css({
"background": "red"
});
//$(".btn2").css({"display":"block"});
} else {
$(".btn1").css({
"display": "block"
});
$(".btn2").css({
"display": "none"
});
}
});
// while article is clicked, menuSelect.index() > 0
$("body").click(function() {
if ($("article").hasClass("On")) {
if ($("#menuSelect option:selected").index() > 0) {
$(".btn1").css({
"display": "none"
});
$(".btn2").css({
"display": "block"
});
}
}
})
$(".area_popup").addClass("none")
$(".end").addClass("none");
$(".section2").children("article").one("click", function() {
console.log($(this).index())
var target = $("#tab" + $(this).index())
$("#Apply").click(function() {
var menuSelect = document.getElementById("menuSelect");
//console.log(menuSelect);
switch (menuSelect.value) {
case "a":
case "b":
case "c":
case "d":
target.find(".Apply_Check").append("<div class='User'>" + menuSelect.value + "</div>");
break;
}
$(".end").removeClass("none");
$("#Apply").addClass("none");
//alert("신청 완료 되었습니다")
})
})
$(document).on("click", '.end', function() {
//본인꺼만
$(".User").remove();
$(".end").addClass("none");
$("#Apply").removeClass("none");
});
$("article").click(function() {
if (parseInt($(this).find("span").text()) == 0) {
//$(".button").css({"display":"none"});
//$(".btn1,.btn2, .end").css({"display":"none"})
//$(".btn4").css({"display":"block"});
$(".area_popup3").css({
"display": "block"
});
} else {
//$(".button").css({"display":"block"});
//$(".btn4").css({"display":"none"});
}
});
//메뉴 하$(단 클릭시 섹션 2 남은 수량이 없는 경우
$(".section4 ul").children("li").click(function() {
var article = $('article:eq(' + $(this).index() + ')')
if (parseInt(article.find("span").text()) == 0) {
$(".area_popup3").css({
"display": "block"
});
}
})
$("body").click(function(e) {
if ($("#menuSelect option:selected").index() == 0) {
$(".btn1").css({
"display": "block"
});
$(".btn2").css({
"display": "none"
});
}
})
});
function fn_popup_close(name) {
//$('body').removeClass('fixed');
//body class removeClass
$('.' + name).hide();
}
function fn_popup_open(name) {
//$('body').addClass('fixed');
$('.' + name).show();
}
/*//////////////////reset//////////////////////////////////////*/
* {
margin: 0;
padding: 0;
}
body,
header,
footer,
section,
nav,
article,
figure,
aside,
details,
main {
margin: 0;
padding: 0;
}
header,
footer,
section,
nav,
article,
figure,
aside,
details,
main {
display: block;
}
a:link,
a:visited {
color: #000;
text-decoration: none;
}
/*a:hover, a:focus{color:#aaa; text-decoration:none;}*/
body {
color: #333;
}
li {
list-style: none;
}
input[type="button"] {
cursor: pointer;
}
input[type=button],
select {
border-radius: 0;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
/*//////////////////reset//////////////////////////////////////*/
#wrap {
max-width: 100%;
margin: 0 auto;
}
/*//////////////section1/////////////////////////////////////*/
section.section1 {
width: 100%;
/*background:#F87141;*/
}
section.section1 .screen_info {
width: 100%;
overflow: hidden;
}
section.section1 .screen_info ul {
width: 300%;
overflow: hidden;
}
section.section1 .screen_info ul li {
width: 31.63%;
float: left;
padding: 10px 1% 10px .7%;
}
/*//////////////section2/////////////////////////////////////*/
section.section2 {
width: 100%;
overflow: hidden;
border: 1px solid #ccc;
border-width: 1px 0;
}
section.section2 h3 {
width: 100%;
height: 50px;
line-height: 50px;
border-bottom: 1px solid #ccc;
text-indent: 2%;
}
section.section2 article {
width: 31.33%;
padding-left: 2%;
height: 100px;
float: left;
}
section.section2 article div {
border-right: 1px solid #ccc;
}
.On {
background: #d4dbdd;
}
/*section.section2 article:last-child{border-right:none;}*/
section.section2 article h2 {
width: 100%;
height: 30px;
font-size: 14px;
line-height: 30px;
}
section.section2 article p.FoodName {
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
font-weight: 900;
font-size: 20px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
section.section2 article p.FoodCnt {
width: 90%;
height: 30px;
line-height: 30px;
text-align: right;
font-size: 13px;
}
/*//////////////section2/////////////////////////////////////*/
/*//////////////section3/////////////////////////////////////*/
section.section3 {
width: 100%;
padding-top: 30px;
}
section.section3 .Select {
border-top: 1px solid #ccc;
position: relative;
}
.Select {
display: block;
content: "";
clear: both;
}
section.section3 .Select p.Selected {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ccc;
}
section.section3 .Select p {
font-weight: 900;
text-indent: 9%;
}
section.section3 .Select p.Selected span {
cursor: pointer;
position: absolute;
right: 20px;
top: 4px;
}
section.section3 .Select p.Selected span img {
width: 10px;
}
.selection {
border-bottom: 1px solid #ccc;
}
/*.on{background:#ccc;}*/
section.section3 select {
width: 100%;
height: 30px;
background: #ECEFF0;
border: 1px solid #ccc;
border-width: 1px 0;
}
select#menuSelect::-ms-expand {
display: none;
}
/*IE*/
select#menuSelect {
appearance: none;
-webkit-appearance: none;
/*for chrome*/
-moz-appearance: none;
/*for firefox*/
background: url(./images/next_shadow.png) no-repeat right;
background-position-x: 97%;
background-size: 14px 24px;
text-indent: 2%;
}
section.section3 p.Avail_time {
width: 95%;
text-align: right;
line-height: 30px;
height: 30px;
padding-right: 5%;
}
section.section3 p input[type=button] {
width: 100%;
border: 1px solid #ccc;
border-width: 1px 0;
background: #F87141;
height: 40px;
color: #fff;
}
section.section3 p.btn1 input[type=button] {
background: #aaa;
}
section.section3 p.end input[type=button] {
background: #aaa;
}
.none {
display: none;
}
/*//////////////section3/////////////////////////////////////*/
/*//////////////section4/////////////////////////////////////*/
section.section4 {
padding-top: 30px;
}
section.section4 ul {
width: 100%;
overflow: hidden;
border: 1px solid #ccc;
border-width: 1px 0;
}
section.section4 ul li {
width: 25%;
height: 30px;
line-height: 30px;
float: left;
font-weight: 900;
font-size: 13px;
text-align: center;
background: #fff;
}
section.section4 ul li a {
display: block;
border-right: 1px solid #ccc;
}
.on>a {
background: #aaa;
color: #fff;
}
section.section4 ul li:last-child a {
border: none;
}
section.section4 .memo {
width: 100%;
}
section.section4 .memo input {
width: 100%;
}
section.section4 article.PaNel {
width: 98%;
padding-left: 2%;
height: 400px;
}
.Apply_Check {
width: 100%;
}
.Apply_Check p.Count {
width: 100%;
height: 50px;
line-height: 50px;
font-weight: 900;
}
#tab4 {
padding: 10px;
}
#tab4 p {
padding-bottom: 20px;
}
/*//////////////dynamic HTML Element ////////////////////////////////////*/
.User {
width: 100%;
height: 50px;
background: #aaa;
}
/*//////////////dynamic HTML Element ////////////////////////////////////*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<section class="section2">
<h3>choose menu</h3>
<article>
<div>
<h2>menu 1.</h2>
</div>
</article>
<article class="scene_two">
<div>
<h2>menu 2.</h2>
</div>
</article>
<article class="scene_three">
<div>
<h2>menu 3.</h2>
</div>
</article>
</section>
<section class="section3">
<select id="menuSelect">
<option value="menu" selected="selected">choose one</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
</select>
<!--<div class="Select">
<p class="Selected" id="reasonSelect" onclick="result();">신청사유 선택<span><img src="./images/next_shadow.png" alt="arrow"/></span></p>
<div class="selection">
<p>외근/출장</p>
<p>당직</p>
<p>당직</p>
<p>기타</p>
</div>
</div>-->
<p class="btn1 button"><input type="button" value="apply" /></p>
<p class="btn2 button"><input type="button" value="apply" id="Apply" /></p>
<p class="end button"><input type="button" value="cancel" onclick="fn_popup_open('area_popup')" /></p>
<!--<p class="btn4 button"><input type="button" value="신청 마감" onclick="fn_popup_open('area_popup')"/></p>-->
<!--<select>
<option>dd</option>
<option>dd</option>
<option>dd</option>
<option>ddd</option>
</select>-->
</section>
</section>
<section class="section4">
<ul>
<li>menu1</li>
<li class="scene_two">menu2</li>
<li class="scene_three">menu3</li>
<li>info</li>
</ul>
<article class="PaNel" id="tab1">
<div class="Apply_Check">
<p class="Count">Panel <span id="ppl1">1</span></p>
</div>
</article>
<article class="PaNel" id="tab2">
<div class="Apply_Check">
<p class="Count">Panel <span id="ppl2">2</span></p>
</div>
</article>
<article class="PaNel" id="tab3">
<div class="Apply_Check">
<p class="Count">Panel <span id="ppl3">3</span></p>
</div>
</article>
<article class="PaNel" id="tab4">
information
</article>
</section>
</div>
You could use JQuery's empty command, it removes all child elements from the parent element
$("#parent").empty()
I have a web page with sticky navbar fixed top and structure of sticky navbar and my sticky navbar structure is
$(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > $(".b").offset().top + $(".b").height() && $("input").val() == "") {
$(".sticky").show();
} else {
$(".sticky").hide();
}
});
});
.container {
width: 1020px;
margin: 0 auto;
}
.container>div {
width: 100%;
height: 300px;
background: #f0f0f0;
border: 1px solid #ccc;
margin: 100px 0;
}
.a:after {
content: "A";
font-size: 250px;
text-align: center;
line-height: 300px;
display: block;
color: #999;
}
.b:after {
content: "B";
font-size: 250px;
text-align: center;
line-height: 300px;
display: block;
color: #999;
}
.c:after {
content: "C";
font-size: 250px;
text-align: center;
line-height: 300px;
display: block;
color: #999;
}
ul.sticky {
list-style-type: none;
padding: 0;
margin: 0;
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #f0f0f0;
height: 50px;
border-bottom: 5px solid #ccc;
display: none;
}
ul.sticky:after,
ul.sticky:before {
content: "";
display: table;
clear: both;
}
ul.sticky li a {
display: block;
float: left;
line-height: 50px;
padding: 0 30px;
text-decoration: none;
color: #999;
}
ul.sticky li a:hover {
background: #999;
color: #f0f0f0;
}
<ul class="sticky">
<li>Home
</li>
<li>About Us
</li>
<li>Download
</li>
<li>Forums
</li>
<li>Contact
</li>
</ul>
<div class="container">
<input type="text" class="input">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
click to see on codepen
and my question is if I'm not putting my .sticky element another pages javascript notifier give me this error and I am not gonna put my .sticky element every page what do I have to do ?
click to see real demo
click to see getting error
You get this error beacause jQuery did not find the element .hotel-search-box in your website.
Javascript
$(function() {
$(window).scroll(function() {
if (!$(".hotel-search-box").length) {
return false; //Check if the element exist
}
if($(window).scrollTop() > $(".hotel-search-box").offset().top+$(".hotel-search-box").height() && $(".oda-giris-cikis").val() == ""){
$(".sticky-checkin").show();
}else{
$(".sticky-checkin").hide();
}
});
});
To fix your probleme add a .hotel-search-box element in your page where you want to show your sticky menu.
I found perfect code for drop down nav bar. But I'm stuck trying to edit it for my needs. Original complete code is situated here: https://github.com/vandoan/Elli/blob/master/dropDownNav.html
And how it looks: http://codepen.io/Xia-lj/pen/KdKOxw
HTML:
<div id="topbar">
<div id="logo">LOGO</div>
<div id="sections_btn_holder">
<button onclick="toggleNavPanel('sections_panel')">Navigator <span id="navarrow">▾</span></button>
</div>
<div id="sections_panel">
<div>
Try adding things like more child div containers, links, buttons, menus, pictures, paragraphs, videos, etc...
</div>
</div>
</div>
CSS:
body {
margin: 0px;
background: #999;
}
div#topbar {
background: -webkit-linear-gradient(#666, #000);
background: linear-gradient(#666, #000);
height: 60px;
}
div#topbar > #logo {
float: left;
width: 140px;
height: 35px;
margin: 8px 0px 0px 30px;
font-size: 36px;
color: #999;
}
div#topbar > #sections_btn_holder {
float: left;
width: 144px;
height: 46px;
padding-top: 16px;
}
div#topbar > #sections_btn_holder > button {
background: #F90;
}
div#topbar > #sections_panel {
position: absolute;
height: 0px;
width: 550px;
background: #000;
top: 60px;
left: 160px;
border-radius: 0px 0px 8px 8px;
overflow: hidden;
z-index: 10000;
transition: height 0.3s linear 0s;
}
div#topbar > #sections_panel > div {
background: #333;
padding: 20px;
height: 238px;
margin: 10px;
color: #FC0;
}
JS:
function toggleNavPanel(x) {
var panel = document.getElementById(x),
navarrow = document.getElementById("navarrow"),
maxH = "300px";
if (panel.style.height == maxH) {
panel.style.height = "0px";
navarrow.innerHTML = "▾";
} else {
panel.style.height = maxH;
navarrow.innerHTML = "▴";
}
}
What I'm trying to get: drop down nav bar like in example, but with three buttons "History", "Philosophy", "Physics". And each of this three sections must contain few books' names, e.g:
History:-
The History of Herodotus.
Titus Livius. The History of Rome.
Ivan Krypiakevych. The Great History of Ukraine.
"Philosophy":-
Works by Plato.
Nicomachean Ethics By Aristotle.
Fables And Aphorisms by Hryhorii Skovoroda.
"Physics":-
Stephen Hawking. A Brief History of Time.
Yakov Perelman. Physics for Entertainment.
I would be grateful to hear from anyone who may be able to help. I'm new in Web-development.
How about something like this CodePen which is same example you provided just a bit modified on the HTML and CSS parts, inside div#sections_panel I've added 3 divs - you mentioned 3 sections in the question - with a .sub_sections class name.
function toggleNavPanel(x) {
var panel = document.getElementById(x),
navarrow = document.getElementById("navarrow"),
maxH = "300px";
if (panel.style.height == maxH) {
panel.style.height = "0px";
navarrow.innerHTML = "▾";
} else {
panel.style.height = maxH;
navarrow.innerHTML = "▴";
}
}
body {
margin: 0px;
background: #999;
}
div#topbar {
background: -webkit-linear-gradient(#666, #000);
background: linear-gradient(#666, #000);
height: 60px;
}
div#topbar > #logo {
float: left;
width: 140px;
height: 35px;
margin: 8px 0px 0px 30px;
font-size: 36px;
color: #999;
}
div#topbar > #sections_btn_holder {
float: left;
width: 144px;
height: 46px;
padding-top: 16px;
}
div#topbar > #sections_btn_holder > button {
background: #F90;
}
div#topbar > #sections_panel {
position: absolute;
height: 0px;
width: 550px;
background: #000;
top: 60px;
padding:0 10px;
left: 160px;
border-radius: 0px 0px 8px 8px;
overflow: hidden;
z-index: 10000;
transition: height 0.3s linear 0s;
}
div#topbar > #sections_panel > .sub_sections {
background: #333;
padding: 10px;
height: 258px;
margin:10px 2px 0 0;
color: #FC0;
width:calc(31% - 10px);
display:inline-block;
float:left;
}
#sections_panel > .sub_sections > a{
color:#EEE;
display:block;
padding:10px 5px;
text-decoration:none;
border-bottom:1px dotted #666;
}
#sections_panel > .sub_sections > a:hover{
color:#333;
background-color:orange;
}
#sections_panel > .sub_sections > h3{
color:orange;
text-align:center;
padding-bottom:5px;
border-bottom:1px #222 solid;
}
<div id="topbar">
<div id="logo">LOGO</div>
<div id="sections_btn_holder">
<button onclick="toggleNavPanel('sections_panel')">Navigator <span id="navarrow">▾</span></button>
</div>
<div id="sections_panel">
<div class="sub_sections">
<h3>Search Engines</h3>
Google
Yahoo!
Bing
</div>
<div class="sub_sections">
<h3>Social Networks</h3>
Facebook
Twitter
</div>
<div class="sub_sections">
<h3>Video Networks</h3>
Youtube
Vimeo
</div>
</div>
</div>
try this......
Html
<div id="topbar">
<div id="logo">LOGO</div>
<div id="sections_btn_holder">
<button onclick="toggleNavPanel('The History of Herodotus,Titus Livius. The History of Rome,Ivan Krypiakevych. The Great History of Ukraine','sections_panel')">History <span id="navarrow">▾</span></button>
<button onclick="toggleNavPanel('Works by Plato,Nicomachean Ethics By Aristotle,Fables And Aphorisms by Hryhorii Skovoroda','sections_panel')">Philosophy <span id="navarrow">▾</span></button>
<button onclick="toggleNavPanel('Stephen Hawking. A Brief History of Time,Yakov Perelman. Physics for Entertainment','sections_panel')">Physics <span id="navarrow">▾</span></button>
</div>
<div id="sections_panel">
<div>
</div>
</div>
</div>
CSS
body {
margin: 0px;
background: #999;
}
div#topbar {
background: -webkit-linear-gradient(#666, #000);
background: linear-gradient(#666, #000);
height: 60px;
}
div#topbar > #logo {
float: left;
width: 140px;
height: 35px;
margin: 8px 0px 0px 30px;
font-size: 36px;
color: #999;
}
div#topbar > #sections_btn_holder {
float: left;
width: auto;
height: 46px;
padding-top: 16px;
}
div#topbar > #sections_btn_holder > button {
background: #F90;
}
div#topbar > #sections_panel {
position: absolute;
height: 0px;
width: 550px;
background: #000;
top: 60px;
left: 160px;
border-radius: 0px 0px 8px 8px;
overflow: hidden;
z-index: 10000;
transition: height 0.3s linear 0s;
}
div#topbar > #sections_panel > div {
background: #333;
padding: 20px;
height: 238px;
margin: 10px;
color: #FC0;
}
JS
function toggleNavPanel(text,x) {
var panel = document.getElementById(x),
navarrow = document.getElementById("navarrow"),
maxH = "300px";
var books=text.split(",");
var html='';
for(var i=0; i<books.length; i++){
html+=(i+1)+") "+books[i]+"<br/>";
}
if (panel.style.height == maxH) {
panel.style.height = "0px";
panel.innerHTML="";
navarrow.innerHTML = "▾";
} else {
panel.style.height = maxH;
panel.innerHTML="<div>"+html+"</div>";
navarrow.innerHTML = "▴";
}
}
are you looking for something like http://codepen.io/fwpolice/pen/pqlgy
jQuery(document).ready(function (e) {
function t(t) {
e(t).bind("click", function (t) {
t.preventDefault();
e(this).parent().fadeOut()
})
}
e(".dropdown-toggle").click(function () {
var t = e(this).parents(".button-dropdown").children(".dropdown-menu").is(":hidden");
e(".button-dropdown .dropdown-menu").hide();
e(".button-dropdown .dropdown-toggle").removeClass("active");
if (t) {
e(this).parents(".button-dropdown").children(".dropdown-menu").toggle().parents(".button-dropdown").children(".dropdown-toggle").addClass("active")
}
});
e(document).bind("click", function (t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-menu").hide();
});
e(document).bind("click", function (t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-toggle").removeClass("active");
})
});
body {
background-color: #eee;
text-align: center;
padding-top: 50px;
}
.nav {
display: block;
font: 13px Helvetica, Tahoma, serif;
text-transform: uppercase;
margin: 0;
padding: 0;
}
.nav li {
display: inline-block;
list-style: none;
}
.nav .button-dropdown {
position: relative;
}
.nav li a {
display: block;
color: #333;
background-color: #fff;
padding: 10px 20px;
text-decoration: none;
}
.nav li a span {
display: inline-block;
margin-left: 5px;
font-size: 10px;
color: #999;
}
.nav li a:hover, .nav li a.dropdown-toggle.active {
background-color: #289dcc;
color: #fff;
}
.nav li a:hover span, .nav li a.dropdown-toggle.active span {
color: #fff;
}
.nav li .dropdown-menu {
display: none;
position: absolute;
left: 0;
padding: 0;
margin: 0;
margin-top: 3px;
text-align: left;
}
.nav li .dropdown-menu.active {
display: block;
}
.nav li .dropdown-menu a {
width: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li>
<a href="#">
No dropdown
</a>
</li>
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
Dropdown 1 <span>▼</span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">
Drop Item 1
</a>
</li>
<li>
<a href="#">
Drop Item 2
</a>
</li>
<li>
<a href="#">
Drop Item 3
</a>
</li>
</ul>
</li>
<li>
<a href="#">
No dropdown
</a>
</li>
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
Dropdown 2 <span>▼</span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">
asdf
</a>
</li>
</ul>
</li>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
Maybe this toolbar is one for you:
http://w2ui.com/web/demo/toolbar
Look at my fiddle code:
http://jsfiddle.net/hassaan39/0kourse6/
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.pin_head {
background: #eee;
}
.pin_head:after {
content: "";
display: block;
clear: both;
height: 0;
}
.pin_head > div {
float: left;
margin-left: -1px;
border-left: 1px solid #ddd;
}
.pin_head > div strong {
font-size: 13px;
padding: 0 10px;
line-height: 50px;
display: block;
}
.pin_head > div.pin_id strong {
line-height: 50px;
padding: 0;
text-align: center;
}
.pin_head > div.pin_id {
margin: 0;
border-left: 0px none;
}
.pin_id {
width: 7%;
border-left: 0px none;
}
.pin_pro {
width: 14%;
}
.pin_date {
width: 7%;
}
.pin_fname {
width: 12%;
}
.pin_lname {
width: 12%;
}
.pin_email {
width: 11%;
}
.pin_phone {
width: 11%;
}
.pin_pass {
width: 20%;
}
.pin_lists ul {
padding: 0;
margin: 0;
}
.pin_lists ul li {
list-style: none;
border-bottom: 1px solid #ddd;
overflow: hidden;
}
.pin_lists ul li:last-child {
border-bottom: 0px none;
}
.pin_lists ul li:nth-child(even) {
background: #fdfbfc;
}
.pin_lists ul li:after {
content: "";
display: block;
clear: both;
height: 0;
}
.pin_lists ul li > div {
float: left;
margin-left: -1px;
border-left: 1px solid #ddd;
padding: 7px 5px;
min-height: 77px;
word-wrap: break-word;
margin-bottom: -99999px;
padding-bottom: 100004px;
}
.pin_delete {
width: 6.7%;
}
.pin_delete a {
display: block;
text-transform: uppercase;
text-align: center;
line-height: 44px;
font-weight: bold;
}
.pin_lists ul li .pin_id {
font-weight: bold;
line-height: 44px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="pin_head">
<div class="pin_id"><strong>Order ID</strong>
</div>
<div class="pin_pro"><strong>Product Name</strong>
</div>
<div class="pin_date"><strong>Dated</strong>
</div>
<div class="pin_fname"><strong>First Name</strong>
</div>
<div class="pin_lname"><strong>Last Name</strong>
</div>
<div class="pin_email"><strong>Email</strong>
</div>
<div class="pin_phone"><strong>Phone</strong>
</div>
<div class="pin_pass"><strong>Password</strong>
</div>
</div>
<div class="pin_lists">
<ul>
<li>
<div class="pin_id" data-col="Order ID">654</div>
<div class="pin_pro" data-col="Product Name">Low Voltage</div>
<div class="pin_date" data-col="Dated">2015-08-07</div>
<div class="pin_fname" data-col="First Name">John</div>
<div class="pin_lname" data-col="Last Name">Tait</div>
<div class="pin_email" data-col="Email">johnson#mail.com</div>
<div class="pin_phone" data-col="Phone">123-456-789</div>
<div class="pin_pass" data-col="Password">passcode</div>
<div class="pin_delete" data-col="Change Record">Edit
</div>
</li>
<li>
<div class="pin_id" data-col="Order ID">654</div>
<div class="pin_pro" data-col="Product Name">Low Voltage</div>
<div class="pin_date" data-col="Dated">2015-08-07</div>
<div class="pin_fname" data-col="First Name">John</div>
<div class="pin_lname" data-col="Last Name">Tait</div>
<div class="pin_email" data-col="Email">johnson#mail.com</div>
<div class="pin_phone" data-col="Phone">123-456-789</div>
<div class="pin_pass" data-col="Password">passcode</div>
<div class="pin_delete" data-col="Change Record">Edit
</div>
</li>
</ul>
</div>
I want to add text from (pin_head > div) in (.pin_lists li) data-col, using .each() function jQuery. I am here hard coding the values.
Please assist me the good road. :)
I am new in jQuery.
I suppose you want the header of each column to be the attribute data-col for each cell.
You can do something like this:
$(document).ready(function() {
var list = $('.pin_lists li');
$('.pin_head div').each(function(item) {
var _this = this;
list.each(function(element) {
$($(this).children()[item]).attr('data-col', $(_this).find('strong').text())
})
})
})
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.pin_head {
background: #eee;
}
.pin_head:after {
content: "";
display: block;
clear: both;
height: 0;
}
.pin_head > div {
float: left;
margin-left: -1px;
border-left: 1px solid #ddd;
}
.pin_head > div strong {
font-size: 13px;
padding: 0 10px;
line-height: 50px;
display: block;
}
.pin_head > div.pin_id strong {
line-height: 50px;
padding: 0;
text-align: center;
}
.pin_head > div.pin_id {
margin: 0;
border-left: 0px none;
}
.pin_id {
width: 7%;
border-left: 0px none;
}
.pin_pro {
width: 14%;
}
.pin_date {
width: 7%;
}
.pin_fname {
width: 12%;
}
.pin_lname {
width: 12%;
}
.pin_email {
width: 11%;
}
.pin_phone {
width: 11%;
}
.pin_pass {
width: 20%;
}
.pin_lists ul {
padding: 0;
margin: 0;
}
.pin_lists ul li {
list-style: none;
border-bottom: 1px solid #ddd;
overflow: hidden;
}
.pin_lists ul li:last-child {
border-bottom: 0px none;
}
.pin_lists ul li:nth-child(even) {
background: #fdfbfc;
}
.pin_lists ul li:after {
content: "";
display: block;
clear: both;
height: 0;
}
.pin_lists ul li > div {
float: left;
margin-left: -1px;
border-left: 1px solid #ddd;
padding: 7px 5px;
min-height: 77px;
word-wrap: break-word;
margin-bottom: -99999px;
padding-bottom: 100004px;
}
.pin_delete {
width: 6.7%;
}
.pin_delete a {
display: block;
text-transform: uppercase;
text-align: center;
line-height: 44px;
font-weight: bold;
}
.pin_lists ul li .pin_id {
font-weight: bold;
line-height: 44px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pin_head">
<div class="pin_id"><strong>Order ID</strong>
</div>
<div class="pin_pro"><strong>Product Name</strong>
</div>
<div class="pin_date"><strong>Dated</strong>
</div>
<div class="pin_fname"><strong>First Name</strong>
</div>
<div class="pin_lname"><strong>Last Name</strong>
</div>
<div class="pin_email"><strong>Email</strong>
</div>
<div class="pin_phone"><strong>Phone</strong>
</div>
<div class="pin_pass"><strong>Password</strong>
</div>
</div>
<div class="pin_lists">
<ul>
<li>
<div class="pin_id">654</div>
<div class="pin_pro">Low Voltage</div>
<div class="pin_date">2015-08-07</div>
<div class="pin_fname">John</div>
<div class="pin_lname">Tait</div>
<div class="pin_email">johnson#mail.com</div>
<div class="pin_phone">123-456-789</div>
<div class="pin_pass">passcode</div>
<div class="pin_delete">Edit
</div>
</li>
<li>
<div class="pin_id">654</div>
<div class="pin_pro">Low Voltage</div>
<div class="pin_date">2015-08-07</div>
<div class="pin_fname">John</div>
<div class="pin_lname">Tait</div>
<div class="pin_email">johnson#mail.com</div>
<div class="pin_phone">123-456-789</div>
<div class="pin_pass">passcode</div>
<div class="pin_delete">Edit
</div>
</li>
</ul>
</div>
Use the following jQuery to dynamically create the data-col elements on your li based on the contents of your pin_head div:
$(".pin_lists div").each(function() {
$(this).attr("data-col", $($(".pin_head").children()[$(this).index()]).find("strong").text());
});
Live Demo:
$(".pin_lists div").each(function() {
$(this).attr("data-col", $($(".pin_head").children()[$(this).index()]).find("strong").text());
});
* {
margin:0px;
padding:0px;
box-sizing:border-box;
}
.pin_head {
background: #eee;
}
.pin_head:after {
content:"";
display:block;
clear:both;
height:0;
}
.pin_head > div {
float:left;
margin-left:-1px;
border-left: 1px solid #ddd;
}
.pin_head > div strong {
font-size: 13px;
padding:0 10px;
line-height:50px;
display:block;
}
.pin_head > div.pin_id strong {
line-height: 50px;
padding: 0;
text-align: center;
}
.pin_head > div.pin_id {
margin:0;
border-left:0px none;
}
.pin_id {
width:7%;
border-left: 0px none;
}
.pin_pro {
width:14%;
}
.pin_date {
width:7%;
}
.pin_fname {
width:12%;
}
.pin_lname {
width:12%;
}
.pin_email {
width:11%;
}
.pin_phone {
width:11%;
}
.pin_pass {
width:20%;
}
.pin_lists ul {
padding:0;
margin:0;
}
.pin_lists ul li {
list-style:none;
border-bottom: 1px solid #ddd;
overflow:hidden;
}
.pin_lists ul li:last-child {
border-bottom:0px none;
}
.pin_lists ul li:nth-child(even) {
background: #fdfbfc;
}
.pin_lists ul li:after {
content:"";
display:block;
clear:both;
height:0;
}
.pin_lists ul li > div {
float:left;
margin-left:-1px;
border-left: 1px solid #ddd;
padding:7px 5px;
min-height:77px;
word-wrap:break-word;
margin-bottom: -99999px;
padding-bottom: 100004px;
}
.pin_delete {
width:6.7%;
}
.pin_delete a {
display:block;
text-transform:uppercase;
text-align:center;
line-height:44px;
font-weight:bold;
}
.pin_lists ul li .pin_id {
font-weight:bold;
line-height:44px;
text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pin_head">
<div class="pin_id"><strong>Order ID</strong>
</div>
<div class="pin_pro"><strong>Product Name</strong>
</div>
<div class="pin_date"><strong>Dated</strong>
</div>
<div class="pin_fname"><strong>First Name</strong>
</div>
<div class="pin_lname"><strong>Last Name</strong>
</div>
<div class="pin_email"><strong>Email</strong>
</div>
<div class="pin_phone"><strong>Phone</strong>
</div>
<div class="pin_pass"><strong>Password</strong>
</div>
</div>
<div class="pin_lists">
<ul>
<li>
<div class="pin_id">654</div>
<div class="pin_pro">Low Voltage</div>
<div class="pin_date">2015-08-07</div>
<div class="pin_fname">John</div>
<div class="pin_lname">Tait</div>
<div class="pin_email">johnson#mail.com</div>
<div class="pin_phone">123-456-789</div>
<div class="pin_pass">passcode</div>
<div class="pin_delete">Edit
</div>
</li>
<li>
<div class="pin_id">654</div>
<div class="pin_pro">Low Voltage</div>
<div class="pin_date">2015-08-07</div>
<div class="pin_fname">John</div>
<div class="pin_lname">Tait</div>
<div class="pin_email">johnson#mail.com</div>
<div class="pin_phone">123-456-789</div>
<div class="pin_pass">passcode</div>
<div class="pin_delete">Edit
</div>
</li>
</ul>
</div>
That live demo produces this result:
In jQuery you can do something like this:
$("#yourElement").data("yourKeyName", "yourValue")
For additional information you can visit this site of the documentation
You could do something like this
var array = [];
$('.pin_head > div').each(function(index, obj) {
array[index] = $(this).text();
});
$('li>div').each(function(index, obj) {
var data = $(this).attr("data-col", array[index]);
});