Animated div with scrollTop lose animation in scrolled page - javascript

So, how the code was supposed to run: if you just load the example, and click on "menu" on the bottom left, a new div cover the entire page, with another menu, sliding from the top. If you click the button again, same animation in reverse. Works fine!
But if you scroll the main page to the bottom, and then click on the menu again, it works, but when you click the menu button again, there is no animation. The menu div simply disappears. How can I fix that?
menu();
function menu(nm_pagina) {
var scroll;
$("#menu01").click(function() {
if ($(".menu_aberto").css("display") == 'none') {
$(".menu_aberto").slideDown(300);
scroll = $(window).scrollTop();
$(".miolo_relacionamentos").hide();
} else {
$(".menu_aberto").slideUp(300);
$('.' + nm_pagina).height('auto');
$(".miolo_relacionamentos").fadeIn(100);
$("html").scrollTop(scroll);
};
});
};
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
height: 100%;
max-width: 800px;
margin: 0 auto;
}
#ft_menu_botoes {
max-width: 800px;
position: fixed;
bottom: 0px;
width: 100%;
display: block;
background-color: #162F67;
height: 60px;
z-index: 10;
}
#ft_menu_botoes #menu01 {
float: left;
width: 25%;
font-size: 13px;
text-align: center;
padding: 10px 0 0 0;
color: white;
height: 100%;
transition: background-color 0.3s;
}
#ft_menu_botoes #menu01 .ico_menu {
color: white;
font-size: 30px;
}
#ft_menu_botoes #menu01:active {
background-color: #2855bb;
}
.menu_aberto {
z-index: 9;
max-width: 800px;
position: absolute;
margin: auto;
left: 0;
bottom: 0;
right: 0;
top: 0;
display: none;
background: #162F67;
/* For browsers that do not support gradients */
background: -webkit-linear-gradient(#2855bb, #162F67);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#2855bb, #162F67);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#2855bb, #162F67);
/* For Firefox 3.6 to 15 */
background: linear-gradient(#2855bb, #162F67);
/* Standard syntax */
width: 100%;
height: 100%;
overflow: auto;
display: none;
}
.menu_aberto #fecha_menu {
float: left;
border: 0;
background-color: transparent;
margin-top: 17px;
color: white;
width: 22%;
height: 100%;
}
.lista_rel {
margin: 10px auto 0 auto;
width: 100%;
border: 1px solid #162F67;
position: relative;
overflow: auto;
transition: opacity 0.3s;
}
.lista_rel:first {
margin-left: 20px;
}
.lista_rel .nome_empresa {
width: 100%;
background-color: #162F67;
margin: 0;
font-size: 14px;
font-weight: normal;
color: white;
padding: 5px 20px;
}
.lista_rel .nome_mae {
width: 100%;
background-color: #e3e5e7;
margin: 0;
font-size: 13px;
font-weight: normal;
padding: 5px 20px;
color: #525860;
}
.lista_rel .posicao_empresa {
width: 40px;
height: 44px;
float: left;
display: block;
position: relative;
}
.lista_rel .textos {
float: left;
width: calc(100% - 100px);
}
.lista_rel .textos .cnpj {
color: #162F67;
margin: 5px 5px 0 0;
font-size: 11px;
}
.lista_rel .textos .cnpj span {
font-size: 13px;
}
.lista_rel .textos .num_documentos {
color: #525860;
margin: 5px 10px 5px 20px;
text-align: right;
font-size: 12px;
}
.lista_rel .box_numero {
width: 60px;
height: 44px;
background-color: #1f4291;
float: right;
display: block;
}
.lista_rel .box_numero p {
color: white;
font-weight: bold;
font-size: 22px;
text-align: center;
margin-top: 10px;
margin-bottom: 0;
}
.header_mob_01 {
margin: 0;
background-color: #162F67;
display: block;
height: 50px;
position: fixed;
top: 0;
width: 100%;
max-width: 800px;
z-index: 5;
}
.rlc {
background-color: white;
height: auto;
padding: 0;
}
.miolo_relacionamentos {
width: 90%;
margin: 0 auto;
padding-top: 60px;
padding-bottom: 100px;
overflow: hidden;
}
/*# sourceMappingURL=fake_code.css.map */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- <link rel="stylesheet" href="./css/relacionamentos.css"> -->
<link rel="stylesheet" href="./css/fake_code.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="vertical"></div>
<div class="rlc">
<div class="header_mob_01"></div>
<div class="menu_aberto"></div>
<div class="miolo_relacionamentos">
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
</div>
<div id="ft_menu_botoes">
<div id="menu01"> <span class="icon-menu ico_menu"></span> <br> Menu </div>
</div>
</div>
<script>
</script>
</body>
</html>
PS: sorry for the clumsy job in the html/css. Just copied the original and started deleting things which do not matter here.

Related

How to pass an argument to a getElementById method?

working on a way of displaying information, 8 panels (when each is clicked it expands content below) - however I am trying to add styling so that when one panel is clicked (active) - the background color updates to green and is removed when a new element is clicked. I can't seem to pass the tabName parameter to getElementById so for now the parameter is hardcoded as banking-tab (which does update to green when clicked). Does anyone have any advice for the best possible solution and a potential approach to explore for the remove function?
function onExpandFuncs(tabName) {
openTab(tabName);
styleTab(tabName);
}
function openTab(tabName) {
var i, x;
x = document.getElementsByClassName('containerTab');
for (i = 0; i < x.length; i++) {
x[i].style.display = 'none';
}
document.getElementById(tabName).style.display = 'block';
}
function styleTab(tabName) {
document.getElementById('banking-tab').classList.add('active-column');
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
/* The grid: Four equal columns that floats next to each other */
.column {
background-color: black;
float: left;
width: 25%;
height: 226px;
padding: 50px;
text-align: center;
font-size: 16px;
cursor: pointer;
color: white;
}
.active-column {
background-color: green;
float: left;
width: 25%;
height: 226px;
padding: 50px;
text-align: center;
font-size: 16px;
cursor: pointer;
color: white;
}
.containerTab {
padding: 20px;
color: white;
}
/* Clear floats after the columns */
.row:after {
content: '';
display: table;
clear: both;
}
/* Closable button inside the container tab */
.closebtn {
float: right;
color: white;
font-size: 35px;
cursor: pointer;
}
.arrow-down {
width: 25px;
height: 25px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="styles.css" />
<script src="index.js"></script>
</head>
<body>
<div style="text-align: center">
<h2>Expanding Grid</h2>
<p>Click on the boxes below:</p>
</div>
<!-- Four columns -->
<div class="row">
<div id="banking-tab" class="column" onclick="onExpandFuncs('b1');">
<img src="./Icons/Banking.svg" />
<p>Banking</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div id="regtech-tab" class="column" onclick="onExpandFuncs('b2');">
<img src="./Icons/Regtech.svg" />
<p>RegTech</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div id="insurtech-tab" class="column" onclick="onExpandFuncs('b3');">
<img src="./Icons/InsurTech.svg" />
<p>InsurTech</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div id="lending-tab" class="column" onclick="onExpandFuncs('b4');">
<img src="./Icons/Lending.svg" />
<p>Lending</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
</div>
<!-- Full-width columns: (hidden by default) -->
<div id="b1" class="containerTab" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<h3>Banking</h3>
<p>
Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
deseruisse ad
</p>
</div>
<div
id="b2"
class="containerTab"
style="display: none; background: lightgrey"
>
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<h2>RegTech</h2>
<p>
Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
deseruisse ad
</p>
</div>
<div
id="b3"
class="containerTab"
style="display: none; background: lightgrey"
>
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<h2>InsurTech</h2>
<p>
Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
deseruisse ad
</p>
</div>
<div
id="b4"
class="containerTab"
style="display: none; background: lightgrey"
>
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<h2>Lending</h2>
<p>
Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
deseruisse ad
</p>
</div>
<!-- Bottom four columns -->
<div class="row">
<div class="column" onclick="openTab('b5');">
<img src="./Icons/Accounting.svg" />
<p>Accounting</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div class="column" onclick="openTab('b6');">
<img src="./Icons/Payments.svg" />
<p>Payments</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div class="column" onclick="openTab('b7');">
<img src="./Icons/Quote.svg" />
<p>Quote Aggregators</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div class="column" onclick="openTab('b8');">
<img src="./Icons/WealthTech.svg" />
<p>WealthTech</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
</div>
<div
id="b5"
class="containerTab"
style="display: none; background: lightgrey"
>
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<h2>Accounting</h2>
<p>
Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
deseruisse ad
</p>
</div>
<div
id="b6"
class="containerTab"
style="display: none; background: lightgrey"
>
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<h2>Payments</h2>
<p>
Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
deseruisse ad
</p>
</div>
<div
id="b7"
class="containerTab"
style="display: none; background: lightgrey"
>
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<h2>Quote</h2>
<p>
Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
deseruisse ad
</p>
</div>
<div
id="b8"
class="containerTab"
style="display: none; background: lightgrey"
>
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<h2>WealthTech</h2>
<p>
Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
deseruisse ad
</p>
</div>
</body>
</html>
Any help would be really appreciated!
All you need to do is loop over all the tab elements and set up a click handler on the each that will set the background color of this, which will represent the element that is handling the event. No need to know or use an id (which should be avoided when possible as their use creates brittle code).
Also don't use .getElementsByClassName().
I've removed all the onclick attributes that aren't relevant to this question to avoid errors from their callbacks not being included in the code here.
// Get all the tabs into a collection
// (don't use .getElementsByClassName()!)
let tabs = document.querySelectorAll(".column");
// Loop over all the tabs
tabs.forEach(function(tab){
// Set up a click event handler on each of the tabs
tab.addEventListener("click", function(event){
// Loop over all the tabs and remove the active class
tabs.forEach(function(tab){
tab.classList.remove("active-column");
});
// Set the background of the clicked tab
this.classList.add("active-column");
});
});
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
/* The grid: Four equal columns that floats next to each other */
.column {
background-color: black;
float: left;
width: 25%;
height: 226px;
padding: 50px;
text-align: center;
font-size: 16px;
cursor: pointer;
color: white;
}
.active-column {
background-color: green;
float: left;
width: 25%;
height: 226px;
padding: 50px;
text-align: center;
font-size: 16px;
cursor: pointer;
color: white;
}
.containerTab {
padding: 20px;
color: white;
}
/* Clear floats after the columns */
.row:after {
content: '';
display: table;
clear: both;
}
/* Closable button inside the container tab */
.closebtn {
float: right;
color: white;
font-size: 35px;
cursor: pointer;
}
.arrow-down {
width: 25px;
height: 25px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="styles.css" />
<script src="index.js"></script>
</head>
<body>
<div style="text-align: center">
<h2>Expanding Grid</h2>
<p>Click on the boxes below:</p>
</div>
<!-- Four columns -->
<div class="row">
<div id="banking-tab" class="column">
<img src="./Icons/Banking.svg" />
<p>Banking</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div id="regtech-tab" class="column">
<img src="./Icons/Regtech.svg" />
<p>RegTech</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div class="column">
<img src="./Icons/InsurTech.svg" />
<p>InsurTech</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div class="column">
<img src="./Icons/Lending.svg" />
<p>Lending</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
</div>
<!-- Full-width columns: (hidden by default) -->
<div id="b1" class="containerTab" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<h3>Banking</h3>
<p>
Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
deseruisse ad
</p>
</div>
<div
id="b2"
class="containerTab"
style="display: none; background: lightgrey"
>
<span class="closebtn"
>×</span
>
<h2>RegTech</h2>
<p>
Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
deseruisse ad
</p>
</div>
<div
id="b3"
class="containerTab"
style="display: none; background: lightgrey"
>
<span class="closebtn"
>×</span
>
<h2>InsurTech</h2>
<p>
Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
deseruisse ad
</p>
</div>
<div
id="b4"
class="containerTab"
style="display: none; background: lightgrey"
>
<span class="closebtn"
>×</span
>
<h2>Lending</h2>
<p>
Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
deseruisse ad
</p>
</div>
<!-- Bottom four columns -->
<div class="row">
<div class="column" >
<img src="./Icons/Accounting.svg" />
<p>Accounting</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div class="column" >
<img src="./Icons/Payments.svg" />
<p>Payments</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div class="column" >
<img src="./Icons/Quote.svg" />
<p>Quote Aggregators</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div class="column" >
<img src="./Icons/WealthTech.svg" />
<p>WealthTech</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
</div>
<div
id="b5"
class="containerTab"
style="display: none; background: lightgrey"
>
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<h2>Accounting</h2>
<p>
Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
deseruisse ad
</p>
</div>
<div
id="b6"
class="containerTab"
style="display: none; background: lightgrey"
>
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<h2>Payments</h2>
<p>
Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
deseruisse ad
</p>
</div>
<div
id="b7"
class="containerTab"
style="display: none; background: lightgrey"
>
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<h2>Quote</h2>
<p>
Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
deseruisse ad
</p>
</div>
<div
id="b8"
class="containerTab"
style="display: none; background: lightgrey"
>
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<h2>WealthTech</h2>
<p>
Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
deseruisse ad
</p>
</div>
</body>
</html>
You are trying to work with two different elements.
Hence, you need to pass two different id's in click function. Something like below
function onExpandFuncs(tabName, clickedTab) {
openTab(tabName);
genericStyleTab(clickedTab);
}
function genericStyleTab(clickedTab) {
document.getElementById(clickedTab).classList.add('active-column');
}
<div id="banking-tab" class="column" onclick="onExpandFuncs('b1', 'banking-tab');">

Show hidden nth-child items onclick

I have a list of content which is all viewable on desktop. On mobile, I have hidden some of the content and want to add a button, which on click, would show the hidden content.
I'm aware of how to hide and show div's on click, ie.
function showClass(id) {
var elem = document.getElementById(id);
var visible = getComputedStyle(elem).display == "block";
if (!visible) {
elem.style.display = "block"
} else {
elem.style.display = "none"
}
}
But unsure on how to approach this for items that are in the same class that are hidden via nth-child?
Markup:
#media(max-width: 576px){
.wrapper:nth-of-type(n+4) {
display: none;
}
}
.showmore{
display: none;
}
#media(max-width: 576px){
.showmore{
display: block;
}
}
<div class="container">
<div class="wrapper">
<p>test 1</p>
</div>
<div class="wrapper">
<p>test 2</p>
</div>
<div class="wrapper">
<p>test 3</p>
</div>
<div class="wrapper">
<p>test 4</p>
</div>
<div class="wrapper">
<p>test 5</p>
</div>
<div class="wrapper">
<p>test 6</p>
</div>
<a class="showmore" onclick="show">Show more</a>
</div>
Use the :not() pseudo-class to only hide the items when the .show-all class is not present on the container:
const container = document.querySelector('.container')
const showmore = document.querySelector('.showmore')
showmore.addEventListener('click', () =>
container.classList.toggle('show-all')
)
.showmore{
display: none;
}
#media(max-width: 576px){
.container:not(.show-all) .wrapper:nth-of-type(n+4) {
display: none;
}
.showmore{
display: block;
}
}
<div class="container">
<div class="wrapper">
<p>test 1</p>
</div>
<div class="wrapper">
<p>test 2</p>
</div>
<div class="wrapper">
<p>test 3</p>
</div>
<div class="wrapper">
<p>test 4</p>
</div>
<div class="wrapper">
<p>test 5</p>
</div>
<div class="wrapper">
<p>test 6</p>
</div>
<a class="showmore">Show more</a>
</div>
I'd first change the placement of the "show more" link in the markup, in order to keep a more consistent order of reading.
With this approach you need to hide all the sibling elements of the link and the click event just removes the link itself, showing all the remaining content.
In this example the link is visible under 640px (open the demo in a full page) and I've also inserted a small fade effect over the text before the link (just remove the linear gradient if you are not interested)
document.querySelector('.showmore').addEventListener('click', function(ev) {
ev.preventDefault();
this.remove();
})
.showmore {
display: none;
margin-top: -5em;
}
.showmore::before {
content: "";
display: block;
height: 5em;
background: linear-gradient(to bottom, transparent, #fff);
}
#media all and (max-width:640px) {
.showmore {
display: block;
position: relative;
}
.showmore ~ * { display: none; }
}
<div class="container">
<div class="wrapper">
<p>Lorem ipsum sit dolor amet consectetur dolor adisciplit elit sed diam nonummy pellentesque.</p>
</div>
<div class="wrapper">
<p>Lorem ipsum sit dolor amet consectetur dolor adisciplit elit sed diam nonummy pellentesque.</p>
</div>
<div class="wrapper">
<p>Lorem ipsum sit dolor amet consectetur dolor adisciplit elit sed diam nonummy pellentesque.</p>
</div>
<div class="wrapper">
<p>Lorem ipsum sit dolor amet consectetur dolor adisciplit elit sed diam nonummy pellentesque.</p>
</div>
<a class="showmore" href="#">Show more</a>
<div class="wrapper">
<p>Lorem ipsum sit dolor amet consectetur dolor adisciplit elit sed diam nonummy pellentesque.</p>
</div>
<div class="wrapper">
<p>Lorem ipsum sit dolor amet consectetur dolor adisciplit elit sed diam nonummy pellentesque.</p>
</div>
</div>

Multiple/Nested tabs using jquery Click function not working

I'm working on tabs here multiple/nested tabs on the same page my code is working fine current class also added data-target attribute also working fine. The problem is on Click function might be I'm not targetting element properly. this children() I used because I have multiple/nested tabs on same page Can anyone suggest me what might be the issue here tabs are not changing click function not working properly
function atscTabs() {
$('.at-tabs').each(function(index, item) {
var tab_item = $(this).find('.at-tab__item');
var tab_item_title = $(this).find('.at-title__text');
var tab_content = $(this).find('.at-content__item');
tab_content.hide();
//adding data attribute
tab_item_title.each(function(idx, ele) {
$(this).attr('data-target', idx)
});
$(tab_item[0], tab_item_title[0]).addClass('current');
$(tab_content[0]).show();
console.log('test');
//Display current tab content
$(this).children('.at-tab-wrapper').children('.at-tab__item').click(function(ele) {
//debugger;
$(this).closest('.at-tabs').children('.at-tab-wrapper').children('.current').removeClass('current').children('.current').removeClass('current');
$(this).addClass('current');
$(this).find('.at-title__text').addClass('current');
$(this).closest('.at-tabs').find('.at-content-wrapper:first > .at-content__item').hide();
$(this).closest('.at-tabs').find('.at-content-wrapper:first > .at-content__item').eq(parseInt($(this).find('[data-target]').attr('data-target'))).show();
ele.stopPropagation();
});
});
}
atscTabs();
.at-tab__item.current {
padding: 10px 20px;
background-color: #3c98ff;
}
.at-tab-wrapper {
display: flex;
padding: 28px 0px;
}
.at-title__text {
text-decoration: none;
font-size: 18px;
color: black;
}
.current .at-title__text {
color: #fff;
}
.at-tab__item {
padding: 10px 20px;
margin: 0 10px;
background: #e1e1e1;
}
.at-content-wrapper {
font-size: 16px;
padding: 25px;
background: #e1e1e1;
}
hr {
height: 5px;
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="at-tabs-d0ea0f6" class="at-tabs at-tab-default " data-position="default">
<div>
<div class="at-tab-wrapper">
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #1</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #2</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #3</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
</div>
</div>
<div class="at-content-wrapper">
<div class="at-content__item">
<p>Tab Content dfdfd</p>
</div>
<div class="at-content__item">
<p>I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
</div>
<div class="at-content__item">
<p>I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
</div>
</div>
</div>
hi i fixed your click issue
function atscTabs() {
$('.at-tabs').each(function(index, item) {
var tab_item = $(this).find('.at-tab__item');
var tab_item_title = $(this).find('.at-title__text');
var tab_content = $(this).find('.at-content__item');
tab_content.hide();
//adding data attribute
tab_item_title.each(function(idx, ele) {
$(this).attr('data-target', idx)
});
$(tab_item[0], tab_item_title[0]).addClass('current');
$(tab_content[0]).show();
console.log('test');
//Display current tab content
$('.at-tab__item').click(function(ele) {
//debugger;
$('.at-tab__item').removeClass('current');
$(this).addClass('current');
$(this).find('.at-title__text').addClass('current');
$(this).closest('.at-tabs').find('.at-content-wrapper:first > .at-content__item').hide();
$(this).closest('.at-tabs').find('.at-content-wrapper:first > .at-content__item').eq(parseInt($(this).find('[data-target]').attr('data-target'))).show();
ele.stopPropagation();
});
});
}
atscTabs();
.at-tab__item.current {
padding: 10px 20px;
background-color: #3c98ff;
}
.at-tab-wrapper {
display: flex;
padding: 28px 0px;
}
.at-title__text {
text-decoration: none;
font-size: 18px;
color: black;
}
.current .at-title__text {
color: #fff;
}
.at-tab__item {
padding: 10px 20px;
margin: 0 10px;
background: #e1e1e1;
}
.at-content-wrapper {
font-size: 16px;
padding: 25px;
background: #e1e1e1;
}
hr {
height: 5px;
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="at-tabs-d0ea0f6" class="at-tabs at-tab-default " data-position="default">
<div>
<div class="at-tab-wrapper">
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #1</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #2</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #3</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
</div>
</div>
<div class="at-content-wrapper">
<div class="at-content__item">
<p>Tab Content dfdfd</p>
</div>
<div class="at-content__item">
<p>I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
</div>
<div class="at-content__item">
<p>I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
</div>
</div>
</div>

Accordeon webpage scrolling wrong

I am working on my website and I just cannot solve one problem I have with a javascript issue:
I have an accordeon type of page what i call now menu and I can open/slide the topics down when I click on them, where more infos will appear on that topic.
I am using smooth scrolling done in JS.
I structured it in "accmain" for accordeon and "accsub" for the content appearing when you click on the accmain.
As I want the transition between two topics to be smooth, I want the last "accmain" to close the according "accsub", then smoothly go to the new "accmain", align it on the top and open the new "accsub".
Now so far everything is just fine.
Only problem I do run into is when You open another topic while one is still open:
It does not align the new accmain to the top, but shifts the whole scroll about the height of the "accsub" which was opened before, but should be closed now. So the new topic is not aligned to top but eventually shifted so far (depending on the last topic and it's height) that You can't see anything of it.
It is actually a pretty simple problem i guess, though I am very new to especially javascript, but I know that it is exactly shifting for the amount of pixels of the accsub before. that's a start :)
here is a Fiddle
thanks everyone, I do appreciate any help.
I am spending now a few weeks on excactly that problem.
/* multi-toggle accordion*/
$(document).ready(function() {
$(".accsub").hide();
$('.accmain').click(function() {
$( this ).toggleClass( "miau100" );
if ($(this).next().is(":visible")) {
$(this).next().slideUp('fast');
$('html,body').animate({
scrollTop: $(this).offset().top - 150
}, 'slow');
$( this ).toggleClass( "miau75" );
} else {
$('.accsub:visible').slideUp('fast');
$(this).next().slideDown('fast');
$('html,body').animate({
scrollTop: $(this).offset().top
}, 'slow');
}
});
});
/* GO TO TOP BUTTON */
$(document).ready(function() {
$("a[href='#top']").click(function() {
$('.accsub:visible').slideUp('fast');
$("html, body").animate({
scrollTop: 0
}, "slow");
return false;
});
});
#import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');
header > .accmain {
height: 150px;
}
p1 > .accmain:hover {
color: grey
}
footer {
min-height: 150px;
}
* {
box-sizing: border-box;
}
.beitrag {}
.accmain {
display: flex;
justify-content: center;
min-height: 3em;
background-color: #FFF;
cursor: pointer;
text-align: left;
border-bottom: solid 1px #585858;
padding: 1px;
color: #585858;
opacity: 0.75;
}
.accmain:hover {
/* background-color: #b3b3b3; */
transition: ease-in-out 0.7s;
color: black;
opacity: 1.0;
}
.miau100 {
opacity: 1.0;
}
.miau75 {
opacity: 0.75;
}
.accsub {
display: flex;
flex-direction: column;
align-items: center;
/* horizontale zentrierung = wenn column dann align-items: center; ansonsten justify-content: center;*/
background-color: #FFF;
border-bottom: solid 1px #625750;
padding-left: 10%;
padding-right: 10%;
}
.imagewrap img {
max-height: 100%;
max-width: 100%;
margin-bottom: 40px;
}
.topbutton {
position: fixed;
width: 50px;
height: 50px;
top: 90%;
left: 90%;
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
background-color: rgba(0, 0, 0, 0.1);
font-size: 2em;
text-decoration: none;
color: #000;
transition: ease 0.7s;
}
.topbutton:hover {
background-color: rgba(0, 0, 0, 0.3);
transition: ease 0.7s;
}
.text {
width: 722px;
font-size: 1em;
}
.newspaper {
-webkit-column-count: 2;
/* Chrome, Safari, Opera */
-moz-column-count: 2;
/* Firefox */
column-count: 2;
font-family: Roboto, sans-serif;
font-size: 14px;
font-style: light;
font-variant: normal;
font-weight: 300;
line-height: 26.4px;
margin-top: 80px;
margin-bottom: 80px;
max-width: 722px;
}
.newspaper2 {
-webkit-column-count: 2;
/* Chrome, Safari, Opera */
-moz-column-count: 2;
/* Firefox */
column-count: 2;
font-family: Roboto, sans-serif;
font-size: 14px;
font-style: light;
font-variant: normal;
font-weight: 500;
line-height: 26.4px;
margin-top: 40px;
margin-bottom: 40px;
max-width: 722px;
}
.newspaper3 {
-webkit-column-count: 1;
/* Chrome, Safari, Opera */
-moz-column-count: 1;
/* Firefox */
column-count: 1;
font-family: Roboto, sans-serif;
font-size: 1em;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 26.4px;
max-width: 722px;
align-items: left;
}
h1 {
font-family: Roboto, sans-serif;
font-size: 24px;
font-style: light;
font-variant: normal;
font-weight: 500;
line-height: 26.4px;
}
h2 {
font-family: Roboto, sans-serif;
font-size: 32px;
font-style: bold;
font-variant: normal;
font-weight: 500;
line-height: 15.4px;
}
h3 {
display: inline;
margin: 0px;
font-family: Roboto, sans-serif;
font-size: 12px;
font-style: bold;
font-variant: normal;
font-weight: 500;
line-height: 15.4px;
}
p {
display: inline;
margin: 0px;
font-family: Roboto, sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 20px;
}
p1 {
display: inline;
margin: 0px;
font-family: Roboto, sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 20px;
color: #A4A4A4;
margin-left: 10px;
}
pre {
font-family: Roboto, sans-serif;
font-size: 13px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 18.5714px;
align-items: left;
}
blockquote {
font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
font-size: 21px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 30px;
}
hr {
width: 100%;
height: 1px;
margin: 0 auto;
color: black;
}
<!DOCTYPE html>
<html lang="de-de">
<meta charset="UTF-8">
<meta name="Bartek Juretko" content="Künstler">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="favicon.png" sizes="16x16" type="image/png">
<body class="all">
<header>
<div class="accmain">
<!-- erstes kind-->
<div class="text">
<h2>BARTEK JURETKO</h2></div>
</div>
<div class="accsub">
<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor
cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming
id quod mazim placerat facer possim assum.
</div>
</div>
</header>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>AStA Cafe<p1>27.01.2015</p1></h1></div>
</div>
<div class="accsub">
<div class="newspaper">Astacafe Hagen, Kunstakademie Duesseldorf
<br>
<br>
<br> Fertigstellung und Eroeffnung
<br>
<br> Der Umbau des Astacafes in der Kunstakademie Duesseldorf hat einen kroenenden Abschluss gefunden: Am 27. Januar 2015 um 19 Uhr wurde das Cafe feierlich eroeffnet. Zur Eroeffnung gab es feinste Koestlichkeiten in Form eines vier Gaenge Menues.
<br> Das Astacafe hat Mo-Fr von 12-19 Uhr geoeffnet.
<br>
<br> Mit Louisa Rossner, Duesseldorf, 2014-15
<br>
<br>
</div>
<div class="imagewrap">
<img src="http://www.umbraframework.de/2270.jpg">
</div>
</div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Ausführung Service-Theke im Sparta<p1>18.04.2017</p1></h1>
</div>
</div>
<div class="accsub">
<div class="newspaper2">
Fertigstellung und Eroeffnung
<br>
<br> Der Umbau des Astacafes in der Kunstakademie Duesseldorf hat einen kroenenden Abschluss gefunden: Am 27. Januar 2015 um 19 Uhr wurde das Cafe feierlich eroeffnet. Zur Eroeffnung gab es feinste Koestlichkeiten in Form eines vier Gaenge Menues.
<br> Das Astacafe hat Mo-Fr von 12-19 Uhr geoeffnet.
<br>
<br> Mit Louisa Rossner, Duesseldorf, 2014-15
</div>
<div class="imagewrap">
<img src="http://www.umbraframework.de/2270.jpg">
</div>
</div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Publikation im Salon Magazin Nr.4<p1>04.2017</p1></h1></div>
</div>
<div class="accsub">
<?php
echo date("d.m.Y H:i:s");
?>
</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Kunstakademie Düsseldorf Rundgang 2017, Teilnahme<p1>02.2017</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>kunstakademie.gallery, Ausstellungsteilnahme&Tab;<p1>12.2016</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>'art-hoc' im Reservat, Ausstellungsteilnahme&Tab;<p1>12.2016</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>kunst kann's 2016, Kunstauktion Teilnahme<p1>11.2016</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>kunstakademie.gallery, Ausstellungsteilnahme<p1>08.2016</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>TOTAL, Ausstellungsteilnahme<p1>08.2016</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>ad absurdum im HINTERZIMMER, Ausstellung<p1>08.2016</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Cafe RAT und TAT, Aktion und Ausstellung<p1>08.2016</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Absolventenstipendium 2016 der Freunde und Förderer<p1>07.2016</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Baukunstkammer, Abschlussausstellung und Akademiebrief<p1>07.2016</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>'art-hoc' in den Ex-Achenbach-Hallen, Ausstellungsteilnahme<p1>03.2016</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Trockenbauwand<p1>04.2016</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Habe Meine Hölzer Sortiert<p1>03.2016</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Kunstakdemie Düsseldorf Rundgang 2016, Teilnahme<p1>01.2016</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Nischenpreis, Wettbewerbsteilnahme<p1>01.2016</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Friesenberg Heidelberg, Entwurf<p1>11.2015</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>kunst kann's 2015, Kunstauktion Teilnahme<p1>11.2015</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Wystawa Plastyki Zagłębia Miedziowego 2015, Ausstellungsteilnahme<p1>08.2015</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>CLASH, Ausstellung<p1>06.2015</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Ein Europahaus für den Europatag im Düsseldorfer Rathaus<p1>09.2015</p1></h1></div>
</div>
<div class="accsub">Entwurf des 'Europahauses' fuer 'We Are Europe' Zum sogenannten Europatag, am 9.Mai, einem Jahrestag der bisher eher als das 'Ende des Zweiten Weltkrieges' bekannt ist, entstand ein Entwurf fuer die von der Organisation 'We Are Europe' geplante
Aktion aus Kartons ein Haus fuer Europa zu bauen. Die Besucher beteiligten sich aktiv an einer Beschriftung der Bausteine mit Werten, die sie mit Europa verbinden, und bauten so Stein fuer Stein das 'Europahaus' im Duesseldorfer Rathaus. Duesseldorfs
Oberbuergermeister Thomas Geisel fing mit dem Grundstein an und eroeffnete zusammen mit der NRW-Ministerin Dr. Schwall-Dueren und dem Vorsitzenden von We Are Europe Jens Baganz um 11 Uhr die Aktion. Mit Aneta Dobozi, Duesseldorf, 2015 2. Foto:
Melanie Zanin 4. Foto: We Are Europe www.duesseldorf.de www.we-are-europe.org </div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Bauhausmuseum Dessau, Wettbewerbsbeitrag<p1>03.2015</p1></h1></div>
</div>
<div class="accsub">
<div class="imagewrap">
<img src="http://www.umbraframework.de/2270.jpg">
</div>
<div class="text">
<div class="newspaper2">
<br>Teilnahme Realisierungswettbewerb
<br>
<br>Staedtebaulich wirkt das Museum wie ein Solitaer umgeben von Vegetation, differenziert betrachtet unterscheiden sich die Geschosse: das Erdgeschoss adaptiert die Baufluchten der Ratsgasse, positioniert zwei Baukoerper in der Verlaengerung
der sich in der Ratsgasse gegenueberstehenden Fassadenreihen und schafft dazwischen einen Hof, als gleich einen Durchgang zum Park in direkter Forfuehrung der Ratsgasse. Wie im Cartesischen Dualismus stehen sich im Erdgeschoss zwar zwei Entitaeten
gegenueber, werden aber im oberen Geschoss miteinander vereint zu einem einheitlichen Ganzen: der Ausstellungshalle, die als Buegel ueber beiden erdgeschossigen Koerpern schwebt. Es ist ein komplimentaeres Tor: von der Stadt zum Park und vom
Park zur Stadt. Die Ausstellunghalle ist ganz bewusst angelehnt an den Gedanken von grossen Messehallen, die Flexibilitaet und Moeglichkeiten bewahren, um der Ausstellungsarchitektur mehr Freiraum zu lassen.
<br>
<br>Dessau, 2015</div>
</div>
</div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Kunstakademie Düsseldorf Rundgang 2015, Teilnahme<p1>02.2015</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>AStA Cafe Hagen, Fertigstellung<p1>01.2015</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Helsinki Guggenheim Museum, Wettbewerbsteilnahme<p1>10.2014</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Kleine Brötchen Backen, Performance<p1>08.2014</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Jaana Caspary VERSUS Bartek Juretko, Ausstellung<p1>08.2014</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>AStA Cafe Hagen in der Kunstakademie, Entwurf<p1>04.2014</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>17,98 EUR<p1>02.2014</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Mercedes-Benz, Workshop<p1>2013/2014</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Gestaltung Rundgangscafe, Vorschlag<p1>12.2013</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Gerresheimer 100, Ausstellung<p1>10.2013</p1></h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Den Toten Ihre Namen Geben, Engere Auswahl Wettbewerbsbeitrag</h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Faerber, Ausstellungsteilnahme</h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Stadt der Zukunft, Workshop</h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Stadthaus in Wien, Wettbewerbsbeitrag</h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Upcycling Berlin, Ausstellungsteilnahme</h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Keine Kunst</h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Brücke im Landschaftsschutzgebiet, Wettbewerbsbeitrag</h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Upcycling Berlin, Wettbewerbsgewinn</h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Keine Kunst</h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Bibliothek in Daegu, Wettbewerbsbeitrag</h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Findlinge Seminar auf der Architektur Biennale in Venedig</h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Keine Kunst</h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Architektur AG an der GGS Marienstrasse</h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Entwurf Mehrfamilienwohnhaus in Indien</h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Autodidaktische Weltkarte</h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Neuer Entwurf für ein Grabmal</h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<h1>Ny Valer Kirke, Wettbewerbsbeitrag</h1></div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap"></div>
</div>
<div class="beitrag">
<div class="accmain">
<div class="text">
<p>Impressum</p>
</div>
</div>
<div class="accsub">subcontent...</div>
<div class="imagewrap">
</div>
</div>
<div>
⌃
</div>
<footer>
Zum Anfang der Seite Scrollen
</footer>
</html>
maybe this could be a solution for you:
$(document).ready(function(){
$(".accsub").hide();
$(".accmain").click(function(){
$(".accsub").hide();
$(this).next(".accsub").slideToggle("fast");
$('html, body').animate({
scrollTop: $(this).offset().top - 1
}, 'slow');
});
});
I guess you want to align the accmain- container to the top of the browser on each klick on it.
and don't forget to put "GO TO THE TOP" inside $(document).ready(function(){YOUR ENTIRE CODE GOES HERE}, so that your code waits for the document to be loaded.

Draggable and sortable Jquery not looking good

I'm trying to replicate this behaviour: https://jqueryui.com/sortable/#portlets
I have included the required fields in my HTML site and it works well. However, it doesn't look as good because the portlet box has a fix width. Therefore, if I have a big form in one portlet and there are elements on the side, they are overlapped. I attach an screenshot (I cover some parts that can't be public):
With black arrows what should be on the side and not on top of my form. With red arrows, the surrounding border around the portlet which should be around the form (or whatever, or not exist at all).
What do I have to do to achieve what I want? I attach relevant code (I've simplify the form a little bit)
$(function() {
$( ".column" ).sortable({
connectWith: ".column",
handle: ".portlet-header",
cancel: ".portlet-toggle",
placeholder: "portlet-placeholder ui-corner-all"
});
$( ".portlet" )
.addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
.find( ".portlet-header" )
.addClass( "ui-widget-header ui-corner-all" )
.prepend( "<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>");
$( ".portlet-toggle" ).click(function() {
var icon = $( this );
icon.toggleClass( "ui-icon-minusthick ui-icon-plusthick" );
icon.closest( ".portlet" ).find( ".portlet-content" ).toggle();
});
});
body {
min-width: 520px;
}
.column {
width: 170px;
float: left;
padding-bottom: 100px;
}
.portlet {
margin: 0 1em 1em 0;
padding: 0.3em;
}
.portlet-header {
padding: 0.2em 0.3em;
margin-bottom: 0.5em;
position: relative;
}
.portlet-toggle {
position: absolute;
top: 50%;
right: 0;
margin-top: -8px;
}
.portlet-content {
padding: 0.4em;
}
.portlet-placeholder {
border: 1px dotted black;
margin: 0 1em 1em 0;
height: 50px;
}
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="./JS/js.js"></script>
<title> </title>
<!-- TESTING -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="./CSS/dragtest.css">
<script src="./JS/dragtest.js"></script>
</head>
<body>
<h2> cambiar </h2>
<div class="column">
<div class="portlet">
<div class="portlet-header">New pick</div>
<div class="portlet-content">
<form>
<fieldset>
<legend>Upload</legend>
<label for="usuari">User: </label>
<select name="usuari" id="usuari">
<option value='1'>Samy</option><option value='2'>Boji</option><option value='3'>Ferrer</option><option value='4'>Pajaru</option> </select>
<div>
<label for="fet"> Fet: </label>
<select name="fet" id="fet">
<option value='1'>Si</option><option value='2'>No - Quota caiguda</option><option value='3'>No - Desaparegut del mercat</option><option value='4'>No - Línea moguda</option> </select>
</div>
<div>
<label for="data"> Data: </label>
<input id="data" name="data" type="date" value="2016-06-28">
</div>
<div>
<label for="horaRebut"> Hora rebut: </label>
<input type="time" value="10:24" name="horaRebut" id="horaRebut">
</div>
<div>
<label for="horaFet"> Hora posat: </label>
<input type="time" value="10:24" name="horaFet" id="horaFet">
</div>
<div>
<label for="comment"> Comentaris extra </label>
<textarea rows="4" cols="80" maxlength="349" name="comment" id="comment"> </textarea>
</div>
<div>
<button name="uploadp" type="submit">Donar pick d'alta</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<div class="column">
<div class="portlet">
<div class="portlet-header">Feeds</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class="portlet">
<div class="portlet-header">News</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
<div class="column">
<div class="portlet">
<div class="portlet-header">Shopping</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
<div class="column">
<div class="portlet">
<div class="portlet-header">Links</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class="portlet">
<div class="portlet-header">Images</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
Looks like the issue is solved if you add width:auto to the thingy having form (View the demo full screen)
$(function() {
$(".column").sortable({
connectWith: ".column",
handle: ".portlet-header",
cancel: ".portlet-toggle",
placeholder: "portlet-placeholder ui-corner-all"
});
$(".portlet")
.addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
.find(".portlet-header")
.addClass("ui-widget-header ui-corner-all")
.prepend("<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>");
$(".portlet-toggle").click(function() {
var icon = $(this);
icon.toggleClass("ui-icon-minusthick ui-icon-plusthick");
icon.closest(".portlet").find(".portlet-content").toggle();
});
});
body {
min-width: 520px;
}
.column {
width: 170px;
float: left;
padding-bottom: 100px;
}
.column.column-form {
width: auto;
}
.portlet {
margin: 0 1em 1em 0;
padding: 0.3em;
}
.portlet-header {
padding: 0.2em 0.3em;
margin-bottom: 0.5em;
position: relative;
}
.portlet-toggle {
position: absolute;
top: 50%;
right: 0;
margin-top: -8px;
}
.portlet-content {
padding: 0.4em;
}
.portlet-placeholder {
border: 1px dotted black;
margin: 0 1em 1em 0;
height: 50px;
}
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="./JS/js.js"></script>
<title></title>
<!-- TESTING -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="./CSS/dragtest.css">
<script src="./JS/dragtest.js"></script>
</head>
<body>
<h2> cambiar </h2>
<div class="column column-form">
<div class="portlet">
<div class="portlet-header">New pick</div>
<div class="portlet-content">
<form>
<fieldset>
<legend>Upload</legend>
<label for="usuari">User:</label>
<select name="usuari" id="usuari">
<option value='1'>Samy</option>
<option value='2'>Boji</option>
<option value='3'>Ferrer</option>
<option value='4'>Pajaru</option>
</select>
<div>
<label for="fet">Fet:</label>
<select name="fet" id="fet">
<option value='1'>Si</option>
<option value='2'>No - Quota caiguda</option>
<option value='3'>No - Desaparegut del mercat</option>
<option value='4'>No - Línea moguda</option>
</select>
</div>
<div>
<label for="data">Data:</label>
<input id="data" name="data" type="date" value="2016-06-28">
</div>
<div>
<label for="horaRebut">Hora rebut:</label>
<input type="time" value="10:24" name="horaRebut" id="horaRebut">
</div>
<div>
<label for="horaFet">Hora posat:</label>
<input type="time" value="10:24" name="horaFet" id="horaFet">
</div>
<div>
<label for="comment">Comentaris extra</label>
<textarea rows="4" cols="80" maxlength="349" name="comment" id="comment"></textarea>
</div>
<div>
<button name="uploadp" type="submit">Donar pick d'alta</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<div class="column">
<div class="portlet">
<div class="portlet-header">Feeds</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class="portlet">
<div class="portlet-header">News</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
<div class="column">
<div class="portlet">
<div class="portlet-header">Shopping</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
<div class="column">
<div class="portlet">
<div class="portlet-header">Links</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class="portlet">
<div class="portlet-header">Images</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>

Categories

Resources