Matej Posted September 15, 2014 Share Posted September 15, 2014 Hi , i have this thing here http://jsfiddle.net/c0g770et/2/ but whenever i click on button , the green div stays on the same place , i want it to make space for the hidden divs , can anyone help me please? Link to comment Share on other sites More sharing options...
niche Posted September 15, 2014 Share Posted September 15, 2014 I'd use java script: http://css-tricks.com/snippets/javascript/showhide-element/ Link to comment Share on other sites More sharing options...
davej Posted September 16, 2014 Share Posted September 16, 2014 Why don't you simply use the Javascript to change the class names? See... http://www.w3schools.com/jsref/prop_html_classname.asp Link to comment Share on other sites More sharing options...
Matej Posted September 16, 2014 Author Share Posted September 16, 2014 Thanks for answers , Yes i could move the last div with javascript but if i did that , the other content would not move automaticly so I dont want to move it with javascript , bcs i would like to use this method for menu on website , so whenever i click on button , the "menu" appears from top so the content of the site moves down so the menu have space and doesnt cover anything. So is there any method how to do it? did i set wrong position on something or?:)Thanks for answers Link to comment Share on other sites More sharing options...
Ingolme Posted September 16, 2014 Share Posted September 16, 2014 I don't understand what you want to do but I can take a guess. When an element is invisible, if you want it to continue occupying its space you can use the visibility property rather than changing the display property. Link to comment Share on other sites More sharing options...
davej Posted September 17, 2014 Share Posted September 17, 2014 Here is what I thought you might be considering... <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>title</title><style>*{ margin:0; padding:0;}#div0{ height: 50px;}#div1 { z-index: -1; height:50px; width:100%; background-color:#bbb; position:absolute; top:50px; left:0;}#div2 { z-index: 1; height:50px; background-color:red; color:white; transition: margin-top 1s ease; -webkit-transition: margin-top 1s ease;}#div3 { z-index: -1; height:50px; width:100%; background-color:#999; color:white; position:absolute; top:100px; left:0; transition: top 1s ease; -webkit-transition: top 1s ease;}#div4{ z-index: 1; height:50px; background-color:green; transition: margin-top 1s ease; -webkit-transition: margin-top 1s ease;}div{ margin-top:0;}.divslide{ margin-top:50px;}</style><script>window.onerror = function(m, u, l){alert('Javascript Error: '+m+'nURL: '+u+'nLine Number: '+l);return true;}</script><script>function func1(id){var xclass = document.getElementById(id).className;if (xclass!='divslide'){document.getElementById(id).className = 'divslide';document.getElementById('div3').style.top = '150px';}else{document.getElementById(id).className = '';document.getElementById('div3').style.top = '100px';}}function func2(id){var xclass = document.getElementById(id).className;if (xclass!='divslide'){document.getElementById(id).className = 'divslide';}else{document.getElementById(id).className = '';}}</script></head><body><div id="div0"><button onclick="func1('div2')">btn1</button><button onclick="func2('div4')">btn2</button></div><div id="div1">div1 hidden message1</div><div id="div2">div2</div><div id="div3">div3 hidden message2</div><div id="div4">div4</div></body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now