Show hide div using JavaScript

Question

For a website I m doing  I want to load one div  and hide another  then have two buttons that will toggle views between the div using JavaScript   This is my current code   x000D   x000D  function replaceContentInContainer target  source    x000D    document getElementById target  innerHTML   document getElementById source  innerHTML  x000D    x000D   x000D  function replaceContentInOtherContainer replace target  source    x000D    document getElementById replace target  innerHTML   document getElementById source  innerHTML  x000D    x000D   lt html gt  x000D   lt button onClick  replaceContentInContainer  target    replace target    gt View Portfolio lt  button gt  x000D   lt button onClick  replaceContentInOtherContainer  replace target    target    gt View Results lt  button gt  x000D   x000D   lt div gt  x000D     lt span id  target  gt div1 lt  span gt  x000D   lt  div gt  x000D   x000D   lt div style  display none  gt  x000D     lt span id  replace target  gt div2 lt  span gt  x000D   lt  div gt  x000D   x000D   x000D    The second function that replaces div2 is not working  but the first one is

User · Answer

I found this question and recently I was implementing some UIs using Vue.js so this can be a good alternative.

First your code is not hiding target when you click on View Profile. You are overriding the content target with div2.

_x000D_

let multiple = new Vue({_x000D_
  el: "#multiple",_x000D_
  data: {_x000D_
    items: [{_x000D_
        id: 0,_x000D_
        name: 'View Profile',_x000D_
        desc: 'Show profile',_x000D_
        show: false,_x000D_
      },_x000D_
      {_x000D_
        id: 1,_x000D_
        name: 'View Results',_x000D_
        desc: 'Show results',_x000D_
        show: false,_x000D_
      },_x000D_
    ],_x000D_
    selected: '',_x000D_
    shown: false,_x000D_
  },_x000D_
  methods: {_x000D_
    showItem: function(item) {_x000D_
      if (this.selected && this.selected.id === item.id) {_x000D_
        item.show = item.show && this.shown ? false : !item.show;_x000D_
      } else {_x000D_
        item.show = (this.selected.show || !item.show) && this.shown ? true : !this.shown;_x000D_
      }_x000D_
      this.shown = item.show;_x000D_
      this.selected = item;_x000D_
    },_x000D_
  },_x000D_
});

_x000D_

<div id="multiple">_x000D_
  <button type="button" v-for="item in items" v-on:click="showItem(item)">{{item.name}}</button>_x000D_
_x000D_
  <div class="" v-if="shown">: {{selected.desc}}</div>_x000D_
</div>_x000D_
_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.7/vue.js"></script>

_x000D_

User · Answer

Just Simple Set the style attribute of ID   To Show the hidden div   lt div id  xyz  style  display none  gt                        lt  div gt    In JavaScript  document getElementById  xyz   style display   block       to hide   To hide the shown div   lt div id  xyz  gt                        lt  div gt    In JavaScript  document getElementById  xyz   style display   none       to display

User · Answer

Using style    lt style type  text css  gt      hidden           display  none           visible           display  block        lt  style gt    Using an event handler in JavaScript is better than the onclick    attribute in HTML    lt button id  RenderPortfolio Btn  gt View Portfolio lt  button gt   lt button id  RenderResults Btn  gt View Results lt  button gt    lt div class  visible  id  portfolio  gt       lt span gt div1 lt  span gt   lt  div gt    lt div class hidden  id  results  gt       lt span gt div2 lt  span gt   lt  div gt    JavaScript    lt script type  text javascript  gt       var portfolioDiv   document getElementById  portfolio        var resultsDiv   document getElementById  results         var portfolioBtn   document getElementById  RenderPortfolio Btn        var resultsBtn   document getElementById  RenderResults Btn         portfolioBtn onclick   function             resultsDiv setAttribute  class    hidden            portfolioDiv setAttribute  class    visible                resultsBtn onclick   function             portfolioDiv setAttribute  class    hidden            resultsDiv setAttribute  class    visible             lt  script gt    jQuery may help you to manipulate DOM elements easy

User · Answer

I found this plain JavaScript code very handy     lt script type  text javascript  gt      function toggle visibility id                 var e   document getElementById id           if   e style display     block                e style display    none           else             e style display    block          lt  script gt

User · Answer

And the Purescript answer  for people using Halogen   import CSS  display  displayNone  import Halogen HTML as HH import Halogen HTML CSS as CSS  render state      HH div   CSS style   display displayNone     HH text  Hi there       If you  inspect element   you ll see something like    lt div style  display  none  gt Hi there  lt  div gt    but nothing will actually display on your screen  as expected

User · Answer

Just Simple Function Need To implement Show hide  div  using JavaScript   lt a id  morelink  class  link-more  style  font-weight  bold  display  block   onclick  this style display  none   document getElementById  states   style display  block   return false   gt READ MORE lt  a gt     lt div id  states  style  display  block  line-height  1 6em   gt   text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here        lt a class  link-less  style  font-weight  bold   onclick  document getElementById  morelink   style display  inline-block   document getElementById  states   style display  none   return false   gt LESS INFORMATION lt  a gt       lt  div gt

User · Answer

lt script type  text javascript  gt      function hide            document getElementById  id   hidden   true            function show            document getElementById  id   hidden   false         lt  script gt

User · Answer

Instead your both functions use toggle function with following body this target  parentNode style display    none  this source  parentNode style display    block    x000D   x000D  function toggle target  source      this target  parentNode style display    none    this source  parentNode style display    block    x000D   lt button onClick  toggle  target    replace target    gt View Portfolio lt  button gt   lt button onClick  toggle  replace target    target    gt View Results lt  button gt    lt div gt     lt span id  target  gt div1 lt  span gt   lt  div gt    lt div style  display none  gt     lt span id  replace target  gt div2 lt  span gt   lt  div gt  x000D   x000D   x000D

User · Answer

A simple example with a Button to scroll up  It will only scroll if the javascript is active  which is an event listening to the scroll type   x000D   x000D  document getElementById  btn   style display  none   window addEventListener  scroll    event    gt        console log scrollY      document getElementById  btn   style display  inline     x000D  a long lt br gt  text lt br gt  comes lt br gt  long lt br gt  text lt br gt  again   lt button id btn class    btn btn-primary  onclick  window scrollTo  top  0  behavior   smooth      gt Scroll to Top lt  button gt  x000D   x000D   x000D   Live in action here

User · Answer

You can Hide Show Div using Js function  sample below    lt script gt      function showDivAttid             if Your Condition                 document getElementById  attid   style display    inline                     else                       document getElementById  attid   style display    none                     lt  script gt    HTML -    lt div  id  attid  style  display none   gt Show Hide this text lt  div gt

User · Answer

You can also use the jQuery JavaScript framework   To Hide Div Block      divIDClass   hide      To show Div Block      divIDClass   show

User · Answer

You can simply manipulate the style of the div in question     document getElementById  target   style display    none

User · Answer

Set your HTML as   lt div id  body  hidden    gt    lt h1 gt Numbers lt  h1 gt    lt  div gt    lt div id  body1  hidden  hidden  gt   Body 1   lt  div gt    And now set the javascript as  function changeDiv         document getElementById  body   hidden    hidden      hide body div tag   document getElementById  body1   hidden          show body1 div tag   document getElementById  body1   innerHTML    If you can see this  JavaScript function worked         display text if JavaScript worked

User · Answer

How to show or hide an element   In order to show or hide an element  manipulate the element s style property  In most cases  you probably just want to change the element s display property   element style display    none                Hide element style display    block               Show element style display    inline              Show element style display    inline-block        Show   Alternatively  if you would still like the element to occupy space  like if you were to hide a table cell   you could change the element s visibility property instead   element style visibility    hidden           Hide element style visibility    visible          Show   Hiding a collection of elements   If you want to hide a collection of elements  just iterate over each element and change the element s display to none   function hide  elements      elements   elements length   elements    elements     for  var index   0  index  lt  elements length  index          elements index  style display    none                Usage  hide document querySelectorAll   target     hide document querySelector   target     hide document getElementById  target        x000D   x000D  hide document querySelectorAll   target     x000D   x000D  function hide  elements    x000D    elements   elements length   elements    elements   x000D    for  var index   0  index  lt  elements length  index      x000D      elements index  style display    none   x000D      x000D    x000D   lt div class  target  gt This div will be hidden  lt  div gt  x000D   x000D   lt span class  target  gt This span will be hidden as well  lt  span gt  x000D   x000D   x000D    Showing a collection of elements   Most of the time  you will probably just be toggling between display  none and display  block  which means that the following may be sufficient when showing a collection of elements   You can optionally specify the desired display as the second argument if you don t want it to default to block   function show  elements  specifiedDisplay      elements   elements length   elements    elements     for  var index   0  index  lt  elements length  index          elements index  style display   specifiedDisplay     block                Usage  var elements   document querySelectorAll   target    show elements    show elements   inline-block       The second param allows you to specify a display value    x000D   x000D  var elements   document querySelectorAll   target    x000D   x000D  show elements   inline-block       The second param allows you to specify a display value x000D   x000D  show document getElementById  hidden-input     x000D   x000D  function show  elements  specifiedDisplay    x000D    elements   elements length   elements    elements   x000D    for  var index   0  index  lt  elements length  index      x000D      elements index  style display   specifiedDisplay     block   x000D      x000D    x000D   lt div class  target  style  display  none  gt This hidden div should have a display of  inline-block  when it is shown  lt  div gt  x000D   x000D   lt span gt Inline span   lt  span gt  x000D   x000D   lt input id  hidden-input    gt  x000D   x000D   x000D    Alternatively  a better approach for showing the element s  would be to merely remove the inline display styling in order to revert it back to its initial state  Then check the computed display style of the element in order to determine whether it is being hidden by a cascaded rule  If so  then show the element   function show  elements  specifiedDisplay      var computedDisplay  element  index     elements   elements length   elements    elements     for  index   0  index  lt  elements length  index          element   elements index           Remove the element s inline display styling     element style display           computedDisplay   window getComputedStyle element  null  getPropertyValue  display         if  computedDisplay      none             element style display   specifiedDisplay     block                  x000D   x000D  show document querySelectorAll   target     x000D   x000D  function show  elements  specifiedDisplay    x000D    var computedDisplay  element  index  x000D   x000D    elements   elements length   elements    elements   x000D    for  index   0  index  lt  elements length  index      x000D      element   elements index   x000D   x000D         Remove the element s inline display styling x000D      element style display       x000D      computedDisplay   window getComputedStyle element  null  getPropertyValue  display    x000D   x000D      if  computedDisplay      none     x000D          element style display   specifiedDisplay     block   x000D        x000D      x000D    x000D   lt span class  target  style  display  none  gt Should revert back to being inline  lt  span gt  x000D   x000D   lt span class  target  style  display  none  gt Inline as well  lt  span gt  x000D   x000D   lt div class  target  style  display  none  gt Should revert back to being block level  lt  div gt  x000D   x000D   lt span class  target  style  display  none  gt Should revert back to being inline  lt  span gt  x000D   x000D   x000D     If you want to take it a step further  you could even mimic what jQuery does and determine the element s default browser styling by appending the element to a blank iframe  without a conflicting stylesheet  and then retrieve the computed styling  In doing so  you will know the true initial display property value of the element and you won t have to hardcode a value in order to get the desired results    Toggling the display   Similarly  if you would like to toggle the display of an element or collection of elements  you could simply iterate over each element and determine whether it is visible by checking the computed value of the display property  If it s visible  set the display to none  otherwise remove the inline display styling  and if it s still hidden  set the display to the specified value or the hardcoded default  block   function toggle  elements  specifiedDisplay      var element  index     elements   elements length   elements    elements     for  index   0  index  lt  elements length  index          element   elements index        if  isElementHidden element           element style display                 If the element is still hidden after removing the inline display       if  isElementHidden element             element style display   specifiedDisplay     block                 else         element style display    none               function isElementHidden  element        return window getComputedStyle element  null  getPropertyValue  display        none                Usage  document getElementById  toggle-button   addEventListener  click   function        toggle document querySelectorAll   target            x000D   x000D  document getElementById  toggle-button   addEventListener  click   function      x000D      toggle document querySelectorAll   target     x000D      x000D   x000D  function toggle  elements  specifiedDisplay    x000D    var element  index  x000D   x000D    elements   elements length   elements    elements   x000D    for  index   0  index  lt  elements length  index      x000D      element   elements index   x000D   x000D      if  isElementHidden element     x000D        element style display       x000D   x000D           If the element is still hidden after removing the inline display x000D        if  isElementHidden element     x000D          element style display   specifiedDisplay     block   x000D          x000D        else   x000D        element style display    none   x000D        x000D      x000D    function isElementHidden  element    x000D      return window getComputedStyle element  null  getPropertyValue  display        none   x000D      x000D    x000D   target   display  none    x000D   lt button id  toggle-button  gt Toggle display lt  button gt  x000D   x000D   lt span class  target  gt Toggle the span  lt  span gt  x000D   x000D   lt div class  target  gt Toggle the div  lt  div gt  x000D   x000D   x000D

User · Answer

You can easily achieve this with the use of jQuery  toggle           btnDisplay   click function           div1   toggle          div2   toggle           lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt   lt div id  div1  gt    First Div  lt  div gt   lt div id  div2  style  display  none   gt    Second Div  lt  div gt   lt button id  btnDisplay  gt Display lt  button gt

[javascript] Show/hide 'div' using JavaScript

Examples related to javascript

Examples related to html

Examples related to onclick

Examples related to innerhtml