Push hidden div from top on click

up vote
-2
down vote

favorite

I would like to know is it possible to make a hidden div to be pushed down after clicking on a link?

So I have;

<div class="container">

   <div class="hidden-top"></div>

   <div class="navbar"></div>

</div>

This is a link where you can see it live: https://jivesoftware.com/. Just click on a language flag.

edited Nov 10 at 12:30

asked Nov 10 at 12:26

Ikkaom

You mean to animate its height?
– Davo
Nov 10 at 12:28

What do you mean by that?
– Ikkaom
Nov 10 at 12:30

Inspect the code and see what's doing. .hidden-top must have height: 0 and transition: height..., then you add a class that change its height.
– azeós
Nov 10 at 12:30

Okay. Can I add content inside hidden-top even when it has height: 0px?
– Ikkaom
Nov 10 at 12:31

Yes, you can totally add content. CSS modifies the appearance of your elements independently of the content.
– Davo
Nov 10 at 12:34

add a comment |

up vote
-2
down vote

favorite

I would like to know is it possible to make a hidden div to be pushed down after clicking on a link?

So I have;

<div class="container">

   <div class="hidden-top"></div>

   <div class="navbar"></div>

</div>

This is a link where you can see it live: https://jivesoftware.com/. Just click on a language flag.

edited Nov 10 at 12:30

asked Nov 10 at 12:26

Ikkaom

You mean to animate its height?
– Davo
Nov 10 at 12:28

What do you mean by that?
– Ikkaom
Nov 10 at 12:30

Inspect the code and see what's doing. .hidden-top must have height: 0 and transition: height..., then you add a class that change its height.
– azeós
Nov 10 at 12:30

Okay. Can I add content inside hidden-top even when it has height: 0px?
– Ikkaom
Nov 10 at 12:31

Yes, you can totally add content. CSS modifies the appearance of your elements independently of the content.
– Davo
Nov 10 at 12:34

add a comment |

up vote
-2
down vote

favorite

I would like to know is it possible to make a hidden div to be pushed down after clicking on a link?

So I have;

<div class="container">

   <div class="hidden-top"></div>

   <div class="navbar"></div>

</div>

This is a link where you can see it live: https://jivesoftware.com/. Just click on a language flag.

edited Nov 10 at 12:30

asked Nov 10 at 12:26

Ikkaom

I would like to know is it possible to make a hidden div to be pushed down after clicking on a link?

So I have;

<div class="container">

   <div class="hidden-top"></div>

   <div class="navbar"></div>

</div>

This is a link where you can see it live: https://jivesoftware.com/. Just click on a language flag.

html

edited Nov 10 at 12:30

asked Nov 10 at 12:26

Ikkaom

edited Nov 10 at 12:30

asked Nov 10 at 12:26

Ikkaom

edited Nov 10 at 12:30

asked Nov 10 at 12:26

Ikkaom

asked Nov 10 at 12:26

Ikkaom

asked Nov 10 at 12:26

Ikkaom

You mean to animate its height?
– Davo
Nov 10 at 12:28

What do you mean by that?
– Ikkaom
Nov 10 at 12:30

Inspect the code and see what's doing. .hidden-top must have height: 0 and transition: height..., then you add a class that change its height.
– azeós
Nov 10 at 12:30

Okay. Can I add content inside hidden-top even when it has height: 0px?
– Ikkaom
Nov 10 at 12:31

Yes, you can totally add content. CSS modifies the appearance of your elements independently of the content.
– Davo
Nov 10 at 12:34

add a comment |

You mean to animate its height?
– Davo
Nov 10 at 12:28

What do you mean by that?
– Ikkaom
Nov 10 at 12:30

Inspect the code and see what's doing. .hidden-top must have height: 0 and transition: height..., then you add a class that change its height.
– azeós
Nov 10 at 12:30

Okay. Can I add content inside hidden-top even when it has height: 0px?
– Ikkaom
Nov 10 at 12:31

Yes, you can totally add content. CSS modifies the appearance of your elements independently of the content.
– Davo
Nov 10 at 12:34

You mean to animate its height?
– Davo
Nov 10 at 12:28

What do you mean by that?
– Ikkaom
Nov 10 at 12:30

Inspect the code and see what's doing. .hidden-top must have height: 0 and transition: height..., then you add a class that change its height.
– azeós
Nov 10 at 12:30

Okay. Can I add content inside hidden-top even when it has height: 0px?
– Ikkaom
Nov 10 at 12:31

Yes, you can totally add content. CSS modifies the appearance of your elements independently of the content.
– Davo
Nov 10 at 12:34

add a comment |

2 Answers
2

active

oldest

votes

up vote
0
down vote

yes you can do that
for example

function myFunction() {

  document.getElementById("demo").innerHTML = "<div class'hidden-top'>I am hidden div</div>";

}

<!DOCTYPE html>

<html>

<body>

<div class="container">

   <button onclick="myFunction()">Click me to show hidden div</button>

   <div class="navbar"></div>

</div>





<p id="demo"></p>

</body>

</html>

answered Nov 10 at 12:54

Istiyak Amin

1009

The problem is you can't hide it again with this code
– D Manokhin
Nov 10 at 13:30

add a comment |

up vote
0
down vote

You may use class("hidden" in example bellow) to (VISUALLY) hide somthing. And toggle that class programmatically.

document.querySelector('button').addEventListener('click', toggle)



function toggle() {

  document.getElementById("thatDiv").classList.toggle('hidden')

}

.forStyling {

  background-color: pink;

  height: 20px;

  -webkit-transition: height .5s;

  transition: height .5s;

}



.hidden {

  height: 0;

  -webkit-transition: height .5s;

  transition: height .5s;

}

<div id='thatDiv' class="forStyling hidden">I am hidden div</div>

<button>Click me to show hidden div</button>

<p>

  Content that shifts down.

edited Nov 10 at 13:21

answered Nov 10 at 13:12

Smollet777

473311

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53238932%2fpush-hidden-div-from-top-on-click%23new-answer', 'question_page');
}
);

Post as a guest

Name

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

up vote
0
down vote

yes you can do that
for example

function myFunction() {

  document.getElementById("demo").innerHTML = "<div class'hidden-top'>I am hidden div</div>";

}

<!DOCTYPE html>

<html>

<body>

<div class="container">

   <button onclick="myFunction()">Click me to show hidden div</button>

   <div class="navbar"></div>

</div>





<p id="demo"></p>

</body>

</html>

answered Nov 10 at 12:54

Istiyak Amin

1009

The problem is you can't hide it again with this code
– D Manokhin
Nov 10 at 13:30

add a comment |

up vote
0
down vote

yes you can do that
for example

function myFunction() {

  document.getElementById("demo").innerHTML = "<div class'hidden-top'>I am hidden div</div>";

}

<!DOCTYPE html>

<html>

<body>

<div class="container">

   <button onclick="myFunction()">Click me to show hidden div</button>

   <div class="navbar"></div>

</div>





<p id="demo"></p>

</body>

</html>

answered Nov 10 at 12:54

Istiyak Amin

1009

The problem is you can't hide it again with this code
– D Manokhin
Nov 10 at 13:30

add a comment |

up vote
0
down vote

yes you can do that
for example

function myFunction() {

  document.getElementById("demo").innerHTML = "<div class'hidden-top'>I am hidden div</div>";

}

<!DOCTYPE html>

<html>

<body>

<div class="container">

   <button onclick="myFunction()">Click me to show hidden div</button>

   <div class="navbar"></div>

</div>





<p id="demo"></p>

</body>

</html>

answered Nov 10 at 12:54

Istiyak Amin

1009

yes you can do that
for example

function myFunction() {

  document.getElementById("demo").innerHTML = "<div class'hidden-top'>I am hidden div</div>";

}

<!DOCTYPE html>

<html>

<body>

<div class="container">

   <button onclick="myFunction()">Click me to show hidden div</button>

   <div class="navbar"></div>

</div>





<p id="demo"></p>

</body>

</html>

function myFunction() {

  document.getElementById("demo").innerHTML = "<div class'hidden-top'>I am hidden div</div>";

}

<!DOCTYPE html>

<html>

<body>

<div class="container">

   <button onclick="myFunction()">Click me to show hidden div</button>

   <div class="navbar"></div>

</div>





<p id="demo"></p>

</body>

</html>

function myFunction() {

  document.getElementById("demo").innerHTML = "<div class'hidden-top'>I am hidden div</div>";

}

<!DOCTYPE html>

<html>

<body>

<div class="container">

   <button onclick="myFunction()">Click me to show hidden div</button>

   <div class="navbar"></div>

</div>





<p id="demo"></p>

</body>

</html>

answered Nov 10 at 12:54

Istiyak Amin

1009

answered Nov 10 at 12:54

Istiyak Amin

1009

answered Nov 10 at 12:54

Istiyak Amin

1009

answered Nov 10 at 12:54

Istiyak Amin

1009

The problem is you can't hide it again with this code
– D Manokhin
Nov 10 at 13:30

add a comment |

The problem is you can't hide it again with this code
– D Manokhin
Nov 10 at 13:30

The problem is you can't hide it again with this code
– D Manokhin
Nov 10 at 13:30

add a comment |

up vote
0
down vote

You may use class("hidden" in example bellow) to (VISUALLY) hide somthing. And toggle that class programmatically.

document.querySelector('button').addEventListener('click', toggle)



function toggle() {

  document.getElementById("thatDiv").classList.toggle('hidden')

}

.forStyling {

  background-color: pink;

  height: 20px;

  -webkit-transition: height .5s;

  transition: height .5s;

}



.hidden {

  height: 0;

  -webkit-transition: height .5s;

  transition: height .5s;

}

<div id='thatDiv' class="forStyling hidden">I am hidden div</div>

<button>Click me to show hidden div</button>

<p>

  Content that shifts down.

edited Nov 10 at 13:21

answered Nov 10 at 13:12

Smollet777

473311

add a comment |

up vote
0
down vote

You may use class("hidden" in example bellow) to (VISUALLY) hide somthing. And toggle that class programmatically.

document.querySelector('button').addEventListener('click', toggle)



function toggle() {

  document.getElementById("thatDiv").classList.toggle('hidden')

}

.forStyling {

  background-color: pink;

  height: 20px;

  -webkit-transition: height .5s;

  transition: height .5s;

}



.hidden {

  height: 0;

  -webkit-transition: height .5s;

  transition: height .5s;

}

<div id='thatDiv' class="forStyling hidden">I am hidden div</div>

<button>Click me to show hidden div</button>

<p>

  Content that shifts down.

edited Nov 10 at 13:21

answered Nov 10 at 13:12

Smollet777

473311

add a comment |

up vote
0
down vote

You may use class("hidden" in example bellow) to (VISUALLY) hide somthing. And toggle that class programmatically.

document.querySelector('button').addEventListener('click', toggle)



function toggle() {

  document.getElementById("thatDiv").classList.toggle('hidden')

}

.forStyling {

  background-color: pink;

  height: 20px;

  -webkit-transition: height .5s;

  transition: height .5s;

}



.hidden {

  height: 0;

  -webkit-transition: height .5s;

  transition: height .5s;

}

<div id='thatDiv' class="forStyling hidden">I am hidden div</div>

<button>Click me to show hidden div</button>

<p>

  Content that shifts down.

edited Nov 10 at 13:21

answered Nov 10 at 13:12

Smollet777

473311

You may use class("hidden" in example bellow) to (VISUALLY) hide somthing. And toggle that class programmatically.

document.querySelector('button').addEventListener('click', toggle)



function toggle() {

  document.getElementById("thatDiv").classList.toggle('hidden')

}

.forStyling {

  background-color: pink;

  height: 20px;

  -webkit-transition: height .5s;

  transition: height .5s;

}



.hidden {

  height: 0;

  -webkit-transition: height .5s;

  transition: height .5s;

}

<div id='thatDiv' class="forStyling hidden">I am hidden div</div>

<button>Click me to show hidden div</button>

<p>

  Content that shifts down.

document.querySelector('button').addEventListener('click', toggle)



function toggle() {

  document.getElementById("thatDiv").classList.toggle('hidden')

}

.forStyling {

  background-color: pink;

  height: 20px;

  -webkit-transition: height .5s;

  transition: height .5s;

}



.hidden {

  height: 0;

  -webkit-transition: height .5s;

  transition: height .5s;

}

<div id='thatDiv' class="forStyling hidden">I am hidden div</div>

<button>Click me to show hidden div</button>

<p>

  Content that shifts down.

document.querySelector('button').addEventListener('click', toggle)



function toggle() {

  document.getElementById("thatDiv").classList.toggle('hidden')

}

.forStyling {

  background-color: pink;

  height: 20px;

  -webkit-transition: height .5s;

  transition: height .5s;

}



.hidden {

  height: 0;

  -webkit-transition: height .5s;

  transition: height .5s;

}

<div id='thatDiv' class="forStyling hidden">I am hidden div</div>

<button>Click me to show hidden div</button>

<p>

  Content that shifts down.

edited Nov 10 at 13:21

answered Nov 10 at 13:12

Smollet777

473311

edited Nov 10 at 13:21

answered Nov 10 at 13:12

Smollet777

473311

answered Nov 10 at 13:12

Smollet777

473311

answered Nov 10 at 13:12

Smollet777

473311

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Name

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ndtyjky