As a js noob, I'm fighting a struggle width the load of content in a slider. I have 4 buttons. When clicking a button, I want a slider to open and content to fade in. When I click another button, I want the slider to stay open but content needs to fade out and new content to fade in.
I have this:
HTML
<div class="standorte-wrapper">
<div class="panel left">
<div class="pan-item tl">
<button href="#" id="expand" class="show-hide">TOGGLE</button>
</div><!--
--><div class="pan-item tr">
<button></button>
</div><!--
--><div class="pan-item bl">
<button></button>
</div><!--
--><div class="pan-item br">
<button></button>
</div>
</div>
<div class="panel right">
<div class="close-button">
<a href="#" id="close" class="close">
<i class="icon-cancel"></i></a>
</div>
<h2>Everything you need to know</h2><!-- CONTENT TO REFRESH -->
</div>
</div>
JS
$(document).ready(function(){
$("#expand").on("click", function(){
$(".standorte-wrapper").toggleClass("expand");
});
$("#close").on("click", function(){
$(".standorte-wrapper").toggleClass("expand");
});
});
That gives me this result, opening and clossing
How can I add the functions I wish as written on top? De content I load in the panel are .php files. file1.php, file2.php, ...
After our collaboration on Github I post here what we did so far
https://github.com/neodev2/ajax-slide-panel
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.12.4.min.js">
</script>
<script>
$(document).ready(function(){
var ajaxUrls = [
'snip1.html',
'snip2.html',
'snip3.html',
'snip4.html'
];
var ajaxFiles = [];
for(var i=0; i<ajaxUrls.length; i++){
$.ajax({
method: 'GET',
url: ajaxUrls[i],
success: function(data){
//console.log(data);
ajaxFiles.push(data);
}
});
}
$('.pan-item > button').on('click', function(){
if($('.panel.left').hasClass('open')){
//alert('already open');
}else{
$('.panel.left').addClass('open');
$('.standorte-wrapper').addClass('expand');
}
$('#php-content').html(ajaxFiles[$(this).attr('data-ajaxFile')]);
});
$('#close').on('click', function(){
$('.panel.left').removeClass('open');
$('.standorte-wrapper').removeClass('expand');
});
});
</script>
<title></title>
</head>
<body>
<div class="standorte-wrapper">
<div class="panel left">
<div class="pan-item tl">
<button data-ajaxfile="0">X</button>
</div>
<div class="pan-item tr">
<button data-ajaxfile="1">X</button>
</div>
<div class="pan-item bl">
<button data-ajaxfile="2">X</button>
</div>
<div class="pan-item br">
<button data-ajaxfile="3">X</button>
</div>
</div>
<div class="panel right">
<div class="close-button">
<a class="close" href="#" id="close"><i class="icon-cancel">X</i></a>
</div>
<div>
<h2>Everything you need to know</h2>
<div id="php-content"></div>
</div>
</div><span class="clear"></span>
</div>
</body>
</html>
Related
I have a semantic-UI lefside menu that I want to be persistent. I am trying to make 2 states - a wide one with type for each item, and a compact one with an image for each item.
Currently there are a few issues that I am totally stumped on!
1) Why does the menu completely go away on click?
2) How can I make the page NOT do dim?
3) Can the page collapse in width instead of getting pushed to the right?
4) is it possible to have two menu states, as described, and toggle between them on click?
Thank you very much!
My site is here: http://itp.evejweinberg.com/left/
And my html:
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="semantic/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,800" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<!-- my json of content -->
<script type="text/javascript" src="list.js"></script>
<!-- jQuery to build that content -->
<script type="text/javascript" src="buildScene.js"></script>
<script src="semantic/semantic.min.js"></script>
</head>
<!--//do I need this class? -->
<body class="pushable">
<!-- semantic says to put everything in pusher -->
<div class="pusher">
<div class="all">
<div id="main"></div>
<div class="title-holder">
<div class="animatedDiv"></div>
</div>
<div class='container'>
<div class='header'></div>
<div class="all-books"></div>
</div>
</div>
</div>
<!-- menu -->
<div class="ui vertical left labeled menu fixed small sidebar">
<div class="header link item" onclick="scrollTo(captology)">Intro</div>
<div class="item">
<div class="header link item">Emotions</div>
<div class="menu">
<a class="item link" onclick="scrollTo(hope)">Hope</a>
<a class="item link" onclick="scrollTo(anxiety)">Anxiety</a>
<a class="item link" onclick="scrollTo(fear)">Fear</a>
</div>
</div>
<div class="item">
<div class="header link item">Psychology</div>
<div class="menu">
<a class="item link" onclick="scrollTo(transparency)">Transparency</a>
<a class="item link" onclick="scrollTo(loss)">Loss Aversion</a>
<a class="item link" onclick="scrollTo(dark)">Dark Patterns</a>
<a class="item link" onclick="scrollTo(social)">Social Pressure</a>
</div>
</div>
<div class="item">
<div class="header link" onclick="scrollTo(fogg)">Fogg</div>
<div class="menu">
<a class="item link" onclick="scrollTo(motivation)">Motivation</a>
<a class="item link" onclick="scrollTo(ability)">Ability</a>
<a class="item link" onclick="scrollTo(trigger)">Trigger</a>
</div>
</div>
<div class="item">
<div class="header link" onclick="scrollTo(flow)">Flow</div>
<div class="menu">
<a class="item link" onclick="scrollTo(chunking)">Chunking</a>
<!-- <a class="item">FAQs</a> -->
</div>
</div>
<div class="item">
<div class="header">Ethics</div>
<div class="menu">
<div class="nav-rect" id="e"></div>
<div class="nav-rect" id="e"></div>
<div class="nav-rect" id="e"></div>
<div class="nav-rect" id="e"></div>
</div>
<div class="header link" onclick="scrollTo(sources)">Sources</div>
</div>
<div class="header">About</div>
<div class="ui category search item">
<div class="ui transparent icon input">
<input class="prompt" type="text" placeholder="Search...">
<i class="search link icon"></i>
</div>
<div class="results"></div>
</div>
</div>
</div>
<script type="text/javascript" src="content.js"></script>
<script type="text/javascript" src="sketch.js"></script>
<script type="text/javascript" src="js/intro.js"></script>
<script type="text/javascript" src="js/hope.js"></script>
<script type="text/javascript" src="js/lossAversion.js"></script>
<script type="text/javascript">
$('.sidebar').sidebar('show');
// $('.sidebar')
// .visibility({
// type : 'fixed',
// offset : 45 // give some space from top of screen
// });
// $('.menu').click(function(){
// $('.ui.labeled.icon.sidebar').sidebar('toggle');
//
// })
// $('.ui.sidebar').click(function(){
// sidebar('toggle');
// })
</script>
</body>
</html>
Mystery solved! Semantic-UI was dynamically adding to my html on build. I removed the class 'sidebar' and all pusher and dimmer css went away. That solves #1 and #2. For the rest, i'm just going to go back to jQuery animations to slide the left nav to the left and collapse it's width. Thx All!
I would like to add external Javascript files, for specific pages in my Phonegap app. The app uses Framework7 for the UI.
Example:
Exercise page 2.1 has JavaScript file exercise2_1.js.
Exercise page 2.9 has JavaScript file exercise2_9.js ect.
I only want to load the JavaScript files, when the user is on that specific page.
The JavaScript files work, when they are included in the header section on the index page. I don't want to load all the exercise JavaScript files. I only want to load the one's being used. Is it possible to do this, without loading all the js files?
In the my-app section, i tried to load the files as an external js file. But could not get it to work. Nothing happens.
Index page
<html>
<title>My App</title>
<link rel="stylesheet" href="lib/framework7/css/framework7.ios.min.css">
<link rel="stylesheet" href="lib/framework7/css/framework7.ios.colors.min.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/exercise.css" />
<div class="statusbar-overlay"></div>
<div class="panel-overlay"></div>
<div class="panel panel-left panel-reveal">
<div class="list-block accordion-list">
<ul>
<li class="accordion-item"><a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">2</div>
</div></a>
<div class="accordion-item-content">
<div class="list-block">
<ul>
<li class="item-content">
<div class="item-inner">
Exercise 2</div>
</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="views">
<div class="view view-main">
<!-- Top Navbar-->
<div class="navbar">
<div class="navbar-inner">
<!-- We need cool sliding animation on title element, so we have additional "sliding" class -->
<div class="center sliding">Awesome App</div>
<div class="right">
<i class="icon icon-bars"></i>
</div>
</div>
</div>
<div class="pages navbar-through toolbar-through">
<div data-page="index" class="page">
<div class="page-content">
<div class="content-block">
<p>Page content goes here</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="lib/framework7/js/framework7.min.js"></script>
<script type="text/javascript" src="js/my-app.js"></script>
<script type="text/javascript" src="js/nav.js"></script>
my_app.js page
var myApp = new Framework7();
var $$ = Dom7;
var mainView = myApp.addView('.view-main', {
dynamicNavbar: true
});
$$(document).on('deviceready', function() {
console.log("Device is ready!");
});
myApp.onPageInit('exercise2_1', function (page) {
})
$$(document).on('pageInit', function (e) {
var page = e.detail.page;
if (page.name === 'exercise2_1') {
}
});
$$(document).on('pageInit', '.page[data-page="exercise2_1"]', function (e) {
myApp.alert('Test');
function includeJs(jsFilePath) {
var js = document.createElement("script");
js.type = "text/javascript";
js.src = jsFilePath;
//document.body.appendChild(js);
document.getElementsByTagName("head")[0].appendChild(js);
}
includeJs("js/exercise2_1.js");
})
Exercise 2.1 page (exercise2_1.html)
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="back link">
<i class="icon icon-back"></i>
<span>Back</span>
</a>
</div>
<div class="center sliding">Exercise 2.1</div>
<div class="right">
<i class="icon icon-bars"></i>
</div>
</div>
</div>
<div class="pages">
<div data-page="exercise2_1" class="page">
<form id="Cloze" method="post" action="" onsubmit="return false;">
<div class="ClozeBody">
Use verbs from the Alex-text.<br><br>Example: Alex er våken og TENKER.<br><br>Pappa <span class="GapSpan" id="GapSpan0">
<input type="text" id="Gap0" onfocus="TrackFocus(0)" onblur="LeaveGap()" class="GapBox" size="6"></span> på et kontor. <br>Han <span class="GapSpan" id="GapSpan1"><input type="text" id="Gap1" onfocus="TrackFocus(1)" onblur="LeaveGap()" class="GapBox" size="6">
</span> ingeniør.
</div>
</form>
<button id="CheckButton2" class="FuncButton" onmouseover="FuncBtnOver(this)" onfocus="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onblur="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="CheckAnswers()"> Check </button>
<button class="FuncButton" onmouseover="FuncBtnOver(this)" onfocus="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onblur="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="ShowHint()"> Hint </button>
<div class="Feedback" id="FeedbackDiv">
<div class="FeedbackText" id="FeedbackContent"></div>
<button id="FeedbackOKButton" class="FuncButton" onfocus="FuncBtnOver(this)" onblur="FuncBtnOut(this)" onmouseover="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="HideFeedback(); return false;"> OK </button>
</div>
</div>
</div>
I accomplished this by including JQuery and doing the following:
$$(document).on('pageInit', function (e) {
var page = e.detail.page;
if (page.name == 'page1') {
$.getScript("js/page1.js");
} else if (page.name == 'page2') {
$.getScript("js/page2.js");
}
});
I found the problem. It had to do with the onload event on the index page.
I removed the onload event from the index page and put it in the exercise page.
This solved my issue.
<iframe style="display:none" onload="StartUp()" id="TheBody" src="js/exercise2_1.js"></iframe>
Hopes this helps someone else.
I'm having trouble on a project I mentioned earlier, now the problem is that I want to drag a div and drop it to another div. If I drag a div then it should be added below the previously dropped div. How can I achieve that? My current code is not appending the next div dropped, it overwrites the first one. I have tried many solutions but all end up doing more damage than good. Can anybody please help me, Thank you.
<html>
<head>
<title>CRM</title>
<link rel="stylesheet" href="style/style.css" type="text/css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$(".dragable").draggable({
cancel:"a.ui-icon",
revert:true,
helper:"clone",
cursor:"move",
revertDuration:0
});
$('.droppable').droppable({
accept: ".dragable",
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
// clone item to retain in original "list"
var $item = ui.draggable.clone();
$(this).addClass('has-drop').html($item);
}
});
});
</script>
</head>
<body>
<div class="main-container">
<div class="wrapper">
<div class="tb-head">
<div class="target">
<span class="target-span">Target</span>
</div>
<div class="user1">
<span class="user1-span">User1</span>
</div>
<div class="user2">
<span class="user2-span">User2</span>
</div>
<div class="user3">
<span class="user3-span">User3</span>
</div>
<div class="user4">
<span class="user4-span">User4</span>
</div>
<div class="clear"></div>
</div>
<div class="tb-body">
<div class="inner-target">
<div class="dragable">
<span class="targetinn-span">Target Lead</span>
</div>
<div class="dragable">
<span class="targetinn-span">Assign1 Lead</span>
</div>
<div class="dragable">
<span class="targetinn-span">Assign2 Lead</span>
</div>
<div class="dragable">
<span class="targetinn-span">Assign3 Lead</span>
</div>
</div>
<div class="inner-user1">
<div class="droppable">
<span class="user1inn-span"></span>
</div>
</div>
<div class="inner-user2">
<div class="droppable">
<span class="user2inn-span"></span>
</div>
</div>
<div class="inner-user3">
<div class="droppable">
<span class="user3inn-span"></span>
</div>
</div>
<div class="inner-user4">
<div class="droppable">
<span class="user4inn-span"></span>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
Just change this line of code
$(this).addClass('has-drop').html($item);
to this
$(this).addClass('has-drop').append($item);
By calling .html() you replaced the original html just with last dropped element.
I want to make modal appear when I click on sign up. But the problem is that The modal is not appearing although I have checked the code many times. The modal code when just used without the other content works just fine. The source code is from W3Schools. I am sorry in advance for the way this code occurs, but How stackoverflow text editor works is beyond me. I am new to this,so please don't fry me if it's an idiotic mistake
<!DOCTYPE html>
<html manifest="demo.htm.appcache">
<head>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="main.css">
<link rel="icon" type="image.ico" href="Airbnb logo.ico">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-
bootstrap/3.3.5/js/bootstrap.js"></script>
<style>
#keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
</style>
</head>
<body>
<div class="container">
<div class="navbar">
<ul class ="nav nav-pills">
<li>Name</li>
<li class="divider-vertical"></li>
<li>Browse</li>
<li class="pull-right active">Homepage</li>
<li class="pull-right">
Sign Up <!-- Modal is declared here -->
</li>
<li class="pull-right"><a href="Log%20in.htm" >Log In</a></li>
<li class="pull-right"><a href="Help.htm" >Help</a></li>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h1>Find a place to stay.</h1>
<p>Rent from people in over 34,000 cities and 192 countries.</p>
Learn More
</div>
</div>
<div class ="neighborhood-guides">
<h2>Neighbourhood Guides</h2>
<p>Not sure where to stay? We've created neighbourood guides for cities all around the world</p>
<div class="row">
<div class ="col-md-4">
<div class ="thumbnail">
<div class="zoom">
<img src ="http://goo.gl/0sX3jq" class = "growImage" width="100px">
</div>
</div>
<div class ="thumbnail">
<div class="zoom">
<img src ="http://goo.gl/an2HXY" class="growImage">
</div>
</div>
</div>
<div class ="col-md-4">
<div class ="thumbnail">
<div class="zoom">
<img src = "http://goo.gl/Av1pac" class="growImage">
</div>
</div>
<div class ="thumbnail">
<div class="zoom">
<img src ="http://goo.gl/vw43v1" class="growImage">
</div>
</div>
</div>
<div class ="col-md-4">
<div class ="thumbnail">
<div class="zoom">
<img src ="http://goo.gl/0Kd7UO">
</div>
</div>
</div>
</div>
</div>
<div class="learn-more">
<div class="container">
<div class ="row">
<div class= "col-md-4">
<h3>Travel</h3>
<p>From apartments and rooms to treehouses and boats: stay in unique spaces in 192 countries.</p>
<p>See how to travel on Airbnb</p>
</div>
<div class="col-md-4">
<h3>Host</h3>
<p>Renting out your unused space could pay your bills or fund your next vacation.</p>
<p>Learn more about hosting</p>
</div>
<div class ="col-md-4">
<h3>Trust and Safety</h3>
<p>From Verified ID to our worldwide customer support team, we've got your back.</p>
<p>Learn about trust at Airbnb</p>
</div>
</div>
</div>
</div>
<div class ="container">
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.zoom').mouseover(function(){
//moving the div left a bit is completely optional
//but should have the effect of growing the image from the middle.
$(this).stop().animate({"width": "110%","left":"0px","top":"0px"}, 400,'swing');
}).mouseout(function(){
$(this).stop().animate({"width": "95%","left":"15px","top":"15px"}, 200,'swing');
});;
});
</script>
</body>
</html>
Bootstrap 3.x requires jQuery 1.9.x or higher.
Your reference points to jQuery 1.3.2, which will not work with Bootstrap.
starting over...
I used Chrome to test it, and could not make it work with a link or a button. But when I checked the console I see that there is a javascript error:
Failed to load resource: net::ERR_FILE_NOT_FOUND bootstrap.js:15
Uncaught Error: Bootstrap's JavaScript requires jQuery version 1.9.1
or higher
I got it to work by upgrading to jquery 1.10.2
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
I have a simple fade transition that hides the current div, while un-hiding the div below it. However the transition doesn't look right as when the fade is happening it briefly shows all the div's. I'm new to using jQuery so could anyone show me how i could polish this up a bit to make it look better when the fade transition takes place?
p.s i know the jQuery could be coded better, but again I'm pretty new to jQuery so if anyone has a better way of coding this let me know.
Thanks.
HTML:
<div id="home" class="content" align="center"style="width:400px;height:350px;background-color:grey;">
<h2>Home</h2>
<p>DIV 1 CONTENT GOES HERE</p>
<button id="buttonone" type="button">Click Me!</button>
<!-- ... -->
</div>
<!-- /Home -->
<!-- Portfolio -->
<div id="portfolio" class="panel" style="width:400px;height:350px; background-color:grey;">
<div class="content">
<h2>Portfolio</h2>
<p> DIV 2 CONTENT GOES HERE </p>
<button id="buttontwo" type="button">Click Me!</button>
<!-- ... -->
</div>
</div>
<!-- /Portfolio -->
<!-- About -->
<div id="about" class="panel" style="width:400px;height:350px;background-color:grey;">
<div class="content">
<h2>About</h2>
<p>DIV 3 CONTENT GOES HERE</p>
<button id="buttonthree" type="button">Click Me!</button>
<!-- ... -->
</div>
</div>
<!-- /About -->
<!-- Contact -->
<div id="contact" class="panel" style="width:400px;height:350px;background-color:grey;">
<div class="content">
<h2>Contact</h2>
<p> DIV 4 CONTENT GOES HERE </p>
<button id="buttonfour" type="button">Click Me!</button>
<!-- ... -->
</div>
</div>
<!-- /Contact -->
jQuery:
$(document).ready(function(){
$("#buttonone").click(function(){
$("#home").fadeOut();
});
});
$(document).ready(function(){
$("#buttontwo").click(function(){
$("#portfolio").fadeOut();
});
});
$(document).ready(function(){
$("#buttonthree").click(function(){
$("#aboutfour").fadeOut();
});
});
$(document).ready(function(){
$("#buttonthree").click(function(){
$("#about").fadeOut();
});
});
$(function() {
$('#portfolio').addClass('hidden').hide();
$('#buttonone').click(function() {
if ($('#portfolio').hasClass('hidden')) {
$('#portfolio').removeClass('hidden').fadeIn(1000);
}
});
});
$(function() {
$('#about').addClass('hidden').hide();
$('#buttontwo').click(function() {
if ($('#about').hasClass('hidden')) {
$('#about').removeClass('hidden').fadeIn(1000);
}
});
});
$(function() {
$('#contact').addClass('hidden').hide();
$('#buttonthree').click(function() {
if ($('#contact').hasClass('hidden')) {
$('#contact').removeClass('hidden').fadeIn(1000);
}
});
});
How about you add each button class="button" attribute, and run the following jQuery:
$('.button').click(function() {
if($(this).hasClass("hidden"))
{
//if already hidden, do you want to display it back?
$(this).removeClass("hidden");
}
else{
$(this).parent().parent().next().fadeIn(1000);
$(this).addClass("hidden");
$(this).parent().parent().fadeOut(1000);//this will hide the button as well, is this okay?
}
}
});
So, when a button is clicked the div containing that button will be hidden, and the next div will be showed, is that right? Then, at the beginning, only the first one will be displayed? I am not clear about the functionality.
UPDATE
I got it working finally. There you go: https://jsfiddle.net/ev64mqsp/
note that I included one extra div for Home div to make all main content divs have the same structure.
$('.button').click(function() {
if($(this).next().hasClass("hidenext"))
{
$(this).parent().parent().fadeOut(1000)
$(this).parent().parent().next().removeClass("hidenext");
}
else{
$(this).parent().parent().fadeOut(1000);
$(this).parent().parent().next().addClass("hidenext");
}
});
HTML:
<div id="home" class="content" align="center"style="width:400px;height:350px;background-color:grey;">
<div>
<h2>Home</h2>
<p>DIV 1 CONTENT GOES HERE</p>
<button class="button" id="buttonone" type="button">Click Me!</button>
</div>
</div>
<!-- /Home -->
<!-- Portfolio -->
<div id="portfolio" class="panel" style="width:400px;height:350px; background-color:grey;">
<div class="content">
<h2>Portfolio</h2>
<p> DIV 2 CONTENT GOES HERE </p>
<button class="button" id="buttontwo" type="button">Click Me!
</button>
</div>
</div>
<!-- /Portfolio -->
<!-- About -->
<div id="about" class="panel" style="width:400px;height:350px;background- color:grey;">
<div class="content">
<h2>About</h2>
<p>DIV 3 CONTENT GOES HERE</p>
<button class="button" id="buttonthree" type="button">Click Me!</button>
</div>
</div>
<!-- /About -->
<!-- Contact -->
<div id="contact" class="panel" style="width:400px;height:350px;background-color:grey;">
<div class="content">
<h2>Contact</h2>
<p> DIV 4 CONTENT GOES HERE </p>
<button class="button" id="buttonfour" type="button">Click Me!</button>
<!-- ... -->
</div>
</div>
<!-- /Contact -->
Class hidden (supposed to have display:none) should be added when fadeOut() finish for a good animation. If you want to mantain div position you may use visibility:hidden removing display:none given by fadeOut()
$(document).ready(function(){
$("body > div").not("#home").addClass("hidden");
$("button[type=button]").click(function(){
if ($(this).parent().attr('id') == 'home') {
$(this).parent().fadeOut(1000,function(){
$(this).addClass('hidden');
$(this).next().fadeIn(1000,function(){$(this).removeClass('hidden')});
});
} else {
$(this).parent().parent().fadeOut(1000,function(){
$(this).addClass('hidden');
if ($(this).next().hasClass('panel')) {
$(this).next().fadeIn(1000,function(){$(this).removeClass('hidden')});
}
});
}
});
});
.hidden { display: none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="home" class="content" align="center"style="width:400px;height:200px;background-color:grey;">
<h2>Home</h2>
<p>DIV 1 CONTENT GOES HERE</p>
<button id="buttonone" type="button">Click Me!</button>
<!-- ... -->
</div>
<!-- /Home -->
<!-- Portfolio -->
<div id="portfolio" class="panel" style="width:400px;height:200px; background-color:grey;">
<div class="content">
<h2>Portfolio</h2>
<p> DIV 2 CONTENT GOES HERE </p>
<button id="buttontwo" type="button">Click Me!</button>
<!-- ... -->
</div>
</div>
<!-- /Portfolio -->
<!-- About -->
<div id="about" class="panel" style="width:400px;height:200px;background-color:grey;">
<div class="content">
<h2>About</h2>
<p>DIV 3 CONTENT GOES HERE</p>
<button id="buttonthree" type="button">Click Me!</button>
<!-- ... -->
</div>
</div>
<!-- /About -->
<!-- Contact -->
<div id="contact" class="panel" style="width:400px;height:200px;background-color:grey;">
<div class="content">
<h2>Contact</h2>
<p> DIV 4 CONTENT GOES HERE </p>
<button id="buttonfour" type="button">Click Me!</button>
<!-- ... -->
</div>
</div>
<!-- /Contact -->