I'm building a single-page web app. In this one file, I want a specific div to be shown on startup. Perhaps the user will then press a button, and a new div will replace it.
Right now, I'm using js to hide one div and show another in this case. The problem is, the new div appears further down the page (as it is written in the html file after the first div).
How can I, using javascript, simply replace one div with another as the user navigates back and forth between the divs? Is this possible and recommended?
/* JS
When #firstButton is pressed, replace div #first with div #second
When #secondButton is pressed, replace the div #second with div #first
*/
#second {
visibility: hidden;
}
<div id="first">
<h1>First Page</h1>
<button id="firstButton">Go to second page</button>
</div>
<div id="second">
<h1>Second Page</h1>
<button id="secondButton">Go to first page</button>
</div>
Using visibility: hidden is causing your elements to still take up space, which is why your "pages" don't appear to change places.
Switch to display: none, which can be easily toggled with jQuery's .show() and .hide() like so:
$("#firstButton").on("click", function() {
$("#first").hide();
$("#second").show();
});
$("#secondButton").on("click", function() {
$("#first").show();
$("#second").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">
<h1>First Page</h1>
<button id="firstButton">Go to second page</button>
</div>
<div id="second" style="display: none;">
<h1>Second Page</h1>
<button id="secondButton">Go to first page</button>
</div>
If you don't want to use jQuery:
document.getElementById("firstButton").addEventListener("click", () => {
document.getElementById("first").style.display="none";
document.getElementById("second").style.display="block";
}, false);
document.getElementById("secondButton").addEventListener("click", () => {
document.getElementById("first").style.display="block";
document.getElementById("second").style.display="none";
}, false);
<div id="first">
<h1>First Page</h1>
<button id="firstButton">Go to second page</button>
</div>
<div id="second" style="display:none">
<h1>Second Page</h1>
<button id="secondButton">Go to first page</button>
</div>
Related
I'm trying to implement simple hide/show functionality using jQuery. I have two groups of boxes: A and B. I want to be able to click one button to see just the boxes from group A, and a different button to show just group B. This should not depend on what's happened on the page previously, or the order of button presses.
Based on the official basic code sample for the jQuery UI hide() function, I'm using a strategy where a button click has two effects: first, hide all the boxes from both groups, and second, reveal the boxes from the group I want to see. There's also a button to show all boxes, which basically functions as a reset.
Sometimes this works, sometimes it doesn't (MVCE snippet below). When I start from a fresh page load or a reset, I can click the button to show group A, and it's fine. When I click on the button to show group B, though, the group A buttons stay on the screen. Or, from a fresh page/reset, I can click on the group B button and see just boxes from group B, then the group A button and see just boxes from group A, but then I can't get back to just group B.
A bit of investigation with the console and additional groups has revealed that this has something to do with DOM order. I can always select any given group that I want, to start with, but things get messed up if I then try to show a group that appears earlier in the DOM.
What's causing the current behavior, and how can I fix it?
$(function() {
$("#toggleAll").on("click", function() {
$('.box').removeAttr("style").hide().fadeIn();
});
$("#toggleA").on("click", function() {
$('.box').hide('clip', {}, 1000);
$('.groupA').removeAttr("style").hide().fadeIn();
});
$("#toggleB").on("click", function() {
$('.box').hide('clip', {}, 1000);
$('.groupB').removeAttr("style").hide().fadeIn();
});
});
.box {
border: 1px solid black;
}
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
</head>
<body>
<p>Show boxes of type:</p>
<button id="toggleAll">Show all</button>
<button id="toggleA">Show group A</button>
<button id="toggleB">Show group B</button>
<hr />
<div id="a1" class="box groupA">
<h4>Title</h4>
<p>Text for box A1</p>
</div>
<div id="a2" class="box groupA">
<h4>Title</h4>
<p>Text for box A2</p>
</div>
<div id="b1" class="box groupB">
<h4>Title</h4>
<p>Text for box B1</p>
</div>
<div id="b2" class="box groupB">
<h4>Title</h4>
<p>Text for box B2</p>
</div>
</body>
</html>
Just try it without all your additional options and use the simple hide() and show(), or in your case the fadeIn()
$(function() {
$("#toggleAll").on("click", function() {
$('.box').fadeIn();
});
$("#toggleA").on("click", function() {
$('.box').hide();
$('.groupA').fadeIn();
});
$("#toggleB").on("click", function() {
$('.box').hide();
$('.groupB').fadeIn();
});
});
.box {
border: 1px solid black;
}
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
</head>
<body>
<p>Show boxes of type:</p>
<button id="toggleAll">Show all</button>
<button id="toggleA">Show group A</button>
<button id="toggleB">Show group B</button>
<hr />
<div id="a1" class="box groupA">
<h4>Title</h4>
<p>Text for box A1</p>
</div>
<div id="a2" class="box groupA">
<h4>Title</h4>
<p>Text for box A2</p>
</div>
<div id="b1" class="box groupB">
<h4>Title</h4>
<p>Text for box B1</p>
</div>
<div id="b2" class="box groupB">
<h4>Title</h4>
<p>Text for box B2</p>
</div>
</body>
</html>
I'm currently working on a blog layout with a main div and a side bar with links. I want each link to change the content of the main div.
I tried using toggle and html.
Here's the main class and the content of each link:
<div id="main"></div>
<div id="works">
These are my works.
</div>
<div id="info">
About me.
</div>
<div id="tags">
Tag list.
</div>
And the side bar:
<div id="mainlink">
<button class="linkd" id="butt1"> works </button>
<button class="linkd" id="butt2"> info </button>
<button class="linkd" id="butt3"> Tags </button>
</div>
So when I click on the button "works" I want the content of that div into the main div.
Here's the snippet of the JQuery (that doesn't work):
$(function(){
$('#butt1').click(function() {
$('#main').html($('#works'));
$('#works').toggle();
$('#info').hide();
$('#tags').hide();
});
$('#butt2').click(function() {
$('#main').html($('#info'));
$('#info').toggle();
$('#works').hide();
$('#tags').hide();
});
$('#butt3').click(function() {
$('.mainp').html($('#tags'));
$('#tags').toggle();
$('#info').hide();
$('#works').hide();
});
});
Note: on my CSS I have the display: none as well.
I think it is the easy way to show and hide divs, by assigning a relation to the buttons using HTML5's data attribute (here their ids are used in data-target attribute). See the snippet below...
$(function(){
$('[data-target]').on('click', function(){
var target = $(this).data('target');
$(target).siblings().hide().end().show();
});
});
#main > div:not(:first-child) {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainlink">
<button class="linkd" data-target="#works"> works </button>
<button class="linkd" data-target="#info"> info </button>
<button class="linkd" data-target="#tags"> Tags </button>
</div>
<div id="main">
<div id="works">
These are my works.
</div>
<div id="info">
About me.
</div>
<div id="tags">
Tag list.
</div>
</div>
Say I have 50 div, like this:
<div class="btn1"></div> //Toggles the first container to appear
<div class="btn2"></div> //Toggles the second container to appear
<div class="btn3"></div> //Toggles the third container to appear
And another 50 div that contain information, like this:
<div class="container-1"><h1>This is the first container</h1></div>
<div class="container-2"><h1>This is the second container</h1></div>
<div class="container-3"><h1>This is the third container</h1></div>
Is it possible to make the corresponding div toggle when each button is clicked with just one function? I have read a little about delegation and operating on parents/siblings but it only seems to work on multiple buttons opening the same container, rather than each button opening each container.
Somehow I don't think writing a function for every div is the way to go.
yes it is possible. Basically you need to add a reference to clicked object so click event will know what to show/hide
$(function() {
$('.btn').on('click', function(e) {
var $dataTarget = $($(this).data('target'));
$dataTarget.show().siblings('.container').hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn btn1" data-target=".container-1"></div> //Toggles the first container to appear
<div class="btn btn2" data-target=".container-2"></div> //Toggles the second container to appear
<div class="btn btn3" data-target=".container-3"></div> //Toggles the third container to appear
<div class="container container-1">
<h1>This is the first container</h1>
</div>
<div class="container container-2">
<h1>This is the second container</h1>
</div>
<div class="container container-3">
<h1>This is the third container</h1>
</div>
This will show the container targeted, then will hide other containers.
Use starts with selector ^ Document here
Use data-* to store corresponding div on button.
Select the data-* then use as selector to show
$('div[class^=container]').hide();
$('div[class^=btn]').click(function() {
$('div[class^=container]').hide();
var thisclass = $(this).attr("data-class")
$('.' + thisclass).show();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn1" data-class="container-1">1</div>
<div class="btn2" data-class="container-2">2</div>
<div class="btn3" data-class="container-3">3</div>
<div class="container-1">
<h1>This is the first container</h1>
</div>
<div class="container-2">
<h1>This is the second container</h1>
</div>
<div class="container-3">
<h1>This is the third container</h1>
</div>
You can use index and eq to do this
$("[class*='btn']").click(function(){
$("[class*='container-']").eq($(this).index()-1).toggle();
})
[class*="btn"]{
width:150px;
height:20px;
border:2px solid #000;
display:inline-block;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="btn1"></div>
<div class="btn2"></div>
<div class="btn3"></div>
<div class="container-1">
<h1>This is the first container</h1>
</div>
<div class="container-2">
<h1>This is the second container</h1>
</div>
<div class="container-3">
<h1>This is the third container</h1>
</div>
you can use something like this
$(document).ready(function() {
$("div[class^='btn']").each(function() {
$(this).click(function() {
var str = $(this)[0].className;
$(".container-" + str.substring(3, str.length)).toggle();
});
});
});
Find all the class which starts with btn and apply a click event to it..
and based on the number hide the corresponding container class.
Here is the full code:
$(document).ready(function() {
$("div[class^='btn']").each(function() {
$(this).click(function() {
var str = $(this)[0].className;
$(".container-" + str.substring(3, str.length)).toggle();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn1">aaaa</div> //Toggles the first container to appear
<div class="btn2">bbbb</div> //Toggles the second container to appear
<div class="btn3">cccc</div> //Toggles the third container to appear
<div class="container-1">
<h1>This is the first container</h1>
</div>
<div class="container-2">
<h1>This is the second container</h1>
</div>
<div class="container-3">
<h1>This is the third container</h1>
</div>
(Source: fiddle https://jsfiddle.net/fxabnk4o/17/)
With the help of other members I have the following code that allows to show and hide divs one at a time.
If I click on a button it will show the corresponding div and if I click on another button, the previous div goes away and the next will show.
However, when I click on a button to show a div, it does not have any transition or timing effect. It shows up immediately
If in the function I add a timing like this.. $(id).show(800); It will have the transition or fadeIn effect, but if someone click on a button to show the div and click on the same button again to hide it, the div will go away and return right back.
Can someone help me to add that transition or fadeIn on a way that if the button is clicked to hide the div it will stay hidden?
This is what I have:
<p class="btn" onclick="toggleDivs('#div1');">Show div1</p>
<p class="btn" onclick="toggleDivs('#div2');">Show div2</p>
<p class="btn" onclick="toggleDivs('#div3');">Show div3</p>
<p class="btn" onclick="toggleDivs('#div4');">Show div4</p>
<div class="fadeOut" id="div1" style="display:none"; >
<div class="fadeOut" id="div1" style="display:none"; >
<div class="container">
<p>This is the content of div1</p>
</div>
<div class="fadeOut" id="div2" style="display:none"; >
<div class="container">
<p>This is the content of div2</p>
</div>
<div class="fadeOut" id="div3" style="display:none"; >
<div class="container">
<p>This is the content of div3</p>
</div>
<div class="fadeOut" id="div4" style="display:none"; >
<div class="container">
<p>This is the content of div4</p>
</div>
var toggleDivs = function (id) {
$(".fadeOut").hide(800);
$(id).show();
}
you should disable all buttons untill the end of the animation:
var toggleDivs = function (id) {
$('.btn').attr('disabled', true)
$(".fadeOut").hide(800, function() {
$(id).show(800, function() {
$('.btn').attr('disabled', false);
});
});
}
I suggest you add another class to your buttons that are going to be disabled in order to not disable all buttons with class btn in the DOM.
My target is make 2 divs and slide between them with buttons . also i need the focus one get The main ID So my code was :
HTML :
<button type="button" class="go">go</button>
<button type="button" class="back">back</button>
<div class="Wrapper">
<div class="Main" id="mainID">Main Content</div>
<div class="info">The Sympol kyes</div>
</div>
JQUERY:
$(".show").click(function(){
$('.Main').animate({right :'-300px'},500);
$('.info').animate({left:'0px'},500);
});
$(".back").click(function(){
$('.info').animate({left :'-300px'},500);
$('.Main').animate({right:'0px'},500);
});
Olease check the Live Example
the issue is when i press close its back very slow :(
and how the focus div take the id="mainID"