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

Answer 1

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.

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

  {{item.name}}

  
: {{selected.desc}}