move from one div to another

Question

Currently I have only contents of div=content2 visible on my screen. It has some content and a button. All other div's content are not visible (the display style of other div's are set to none) Now when I click on the button I want the content of only div=ContentXYZ to be displayed. Basically I want to move from current div content to a different div content.

I don't want anything from my current screen to be visible I just want all the contents of another div to be displayed.

Possible duplicate of [JQuery show and hide div on mouse click (animate)](http://stackoverflow.com/questions/17638990/jquery-show-and-hide-div-on-mouse-click-animate) — Aᴍɪʀ, Oct 30 '16 at 06:36

score 0 · Answer 1 · answered Oct 30 '16 at 06:46

With Javascript you can alter the display properties of the divs. You could add a onclick function to your button where you change the styling of the div element.

function displayDiv(){
   document.getElementById("ContentXYZ").style.display = "inline";
}

score 0 · Answer 2 · edited May 23 '17 at 12:09

0

A working sample

HTML

<div id="content2">
    Content 2 goes here
    <button id="btn">Change Div</button>
</div>

<div id="contentXYZ" style="display:none;">
    Content XYZ goes here
</div>

Javascript

$('#btn').on('click',function(){
    $('#content2').css('display','none');
    $('#contentXYZ').css('display','block');
});

more reference: Replace Div Content onclick

edited May 23 '17 at 12:09

Community

1
1

answered Oct 30 '16 at 06:49

jyloo

103
6

What is the div id contentXYZ is inside another div will it still work? – Zxxxxx Oct 31 '16 at 00:55
Yes it will, provided that the parent div is visible. else you'll need to do something like `$('#contentXYZ').css('display','block'); $('#contentXYZ').parents('div').css('display','block');` to set all it parents to visible. – jyloo Oct 31 '16 at 09:47
Can I set the parent div's to invisible and still have a child div visible? – Zxxxxx Oct 31 '16 at 16:19

Crhistian Ramirez · Answer 3 · 2016-10-30T07:01:04.780

0

The most angular way to do it would probably be with ng-class. ng-class conditionally applies a class for example:

ng-class="{'visible': div1}"

This would apply class visible if div1 is true.

Here is a working example:https://plnkr.co/edit/q2XzDbdxPMBFJUl5X7kl?p=preview

edited Oct 30 '16 at 07:01

answered Oct 30 '16 at 06:53

Crhistian Ramirez

1,066
12
20

move from one div to another

3 Answers3