As I embark on rebuilding a website from the ground up, I find myself pondering how to achieve a specific functionality:
My goal is for another view to appear when one of two buttons is clicked. How can this be accomplished?
I attempted the following approach: http://jsfiddle.net/7bqjm1dy/
$("#b1").click(function() {
$("#first").slideDown();
$("#sec").slideUp();
});
$("#b2").click(function() {
$("#sec").slideDown();
$("#first").slideUp();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div style="vertical-align:top; display:inline;">
<button id="b1">Click 1</button><br />
<button id="b2" >Click 2</button>
</div>
<div>
<div id="first" style="display:none; background-color:red; width:100px; height:200px;"></div>
<div id="sec" style="display:none; background-color:blue; width:100px; height:200px;"></div>
</div>However, the implemented solution does not meet my expectations. I envision a slideFromLeft effect and desire proper alignment of the button and map.