How to Display Div After Click the Button in JavaScript

How to display div after click the button in Javascript?

HTML Code:

<div id="welcomeDiv"  style="display:none;" class="answer_list" > WELCOME</div>
<input type="button" name="answer" value="Show Div" onclick="showDiv()" />

Javascript:

function showDiv() {
   document.getElementById('welcomeDiv').style.display = "block";
}

See the Demo: http://jsfiddle.net/rathoreahsan/vzmnJ/

Show and hide divs when click button

The JS toggle function is good for toggling classes on and off.

Here's a simple example

let btn = document.getElementById("btn-login");
let div = document.getElementById("loglog");

btn.addEventListener("click", () => {
    div.classList.toggle('hide');
})

.hide {
  display: none;
}

<button id="btn-login">Unshow/show</button>
<div id="loglog">Stuff to unshow on button click and show on the next button click</div>

how to show div after click only for few seconds

I hope this should resolve your problem.

<div class="row mb-3">
  <div class="col-8 col-md-6 mt-4 ml-1">
    <b-button @click="clickIt()"</b-button>
  </div>
  <div v-if="isClicked" class="col-2 col-md-5 mt-4">
    <p>You've clicked it!</p>
  </div>
</div>

export default {
  data: () => {
    return { isClicked: false };
  },
  methods: {
    clickIt() {
      this.isClicked = true
      setTimeout(() => {
        this.isClicked = false;
      }, 3000);
    },
  },
};

Show Div by clicking on button, hide others

You just need to show the current div first on button click like:

function showOne(id) {    $('#' + id).show();    $('.hide').not('#' + id).hide();}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><button type="button" onclick="showOne('1')">Europe</button><br><button type="button" onclick="showOne('2')">USA</button><div class='hide' id='2'>About USA</div><div class='hide' id='1'>About Europe</div>

Display div 5 seconds after button click

Event handlers in JS don't work as you're expecting; ie. by checking state in if conditions.

Instead you should attach event handler functions to the elements which will run when the specific event occurs. This is how your code should be structured:

jQuery($ => {  $('#identify').on('click', function() {    setTimeout(function() {      $('#block1').removeClass('hide');    }, 5000);  });});

.hide { display: none; }#identify { padding: 10px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><button type="submit" id="identify" class="btn btn-primary">Identify</button><div class="slideRight expandUp hide" id="block1">Text Appears</div>

How to display a div when clicking on a button with js?

var jsaccordion = {
  init: function(target) {
    var headers = $("." + target + " .accordion-btn");
    if (headers.length) {
      headers.on('click', jsaccordion.select);
    }
  },

  select: function() {
    var tar = $(this).closest('.accordion-container');
    $('#shared-container').remove();
    if (tar.hasClass('active')) {
      tar.removeClass('active')
    } else {
      $('.active').removeClass('active')
      tar.addClass('active');
      var targText = tar.find('.accordion-text').html();
      var sharedCont = "<div id='shared-container'>" + targText + "</div>";
      if($('body').width() > 768){
        tar = tar.parent();
      }
      tar.after(sharedCont);
    }
  }
}

window.addEventListener('load', function() {
  jsaccordion.init("accordion-container");
});

body {
  max-width: 90%;
  margin: 0 auto;
}

.accordion-container {
  position: relative;
}

.accordion-container button::before {
  content: '+' !important;
}

.accordion-container.active button::before {
  content: '-' !important;
}

.accordion-container.active::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 15px solid orange;
  position: absolute;
  bottom: -2rem;
  left: 50%;
  transform: translateX(-50%);
  color: orange;
  z-index: 100;
  font-size: 3rem;
  line-height: 1;
}

.accordion-container .accordion-text {
  display: none;
  color: #808080;
  padding: 15px;
  border: 1px solid #ffcc4b;
}

#shared-container {
  margin-top: 2rem;
  display: block;
  width: 100%;
  padding: 2rem;
  border: 1px solid orange;
  text-align: center;
}

#shared-container p {
  margin: 0;
}

@media (max-width : 768px){
  .col-6{
    max-width: 100%;
    min-width: 100%;
  }
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <h1>Testing testing testing</h1>

  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

  <div class='row'>
    <div class='col-6 accordion-container'>
      <div class="my-3">
        <h3 class=" text-center">First one</h3>
        <button class='mx-auto d-block accordion-btn btn btn-white border-primary'></button>
        <div class="accordion-text">
          <p>Egestas erat imperdiet sed euismod nisi porta. Ipsum dolor sit amet consectetur adipiscing. Maecenas pharetra convallis posuere morbi leo urna molestie. Nullam vehicula ipsum a arcu. Gravida cum sociis natoque penatibus et magnis. Duis convallis
            convallis tellus id interdum velit laoreet. </p>
        </div>
      </div>
    </div>

    <div class='col-6 accordion-container'>
      <div class="my-3">
        <h3 class='text-center'>second one</h3>
        <button class='mx-auto d-block accordion-btn btn btn-white border-primary'></button>

        <div class="accordion-text">
          <p>Tempus egestas sed sed risus pretium quam vulputate dignissim. Risus at ultrices mi tempus imperdiet. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Nisl vel pretium lectus quam id leo.</p>
        </div>
      </div>
    </div>
  </div>
</body>

Show div after button click jquery

You haven't got any element with the class .btn-info so you wouldn't be able to call the event from:

  $(".btn-info").on("click", function(e) {
    e.preventDefault(); // in some browsers a button submits if no type=
    $(this).closest(".comment").children(".comment").show();
  });

You have an element with the class .commentbtn which you would then do the same as you did with the .btn-info

  $(".commentbtn").on("click", function(e) {
    e.preventDefault(); // in some browsers a button submits if no type=
    // Console log the element
    console.log($(this).closest(".comment").children(".comment"));
    // Console log not showing the right element. So you need to get the 
    // sibling of the clicked button
    // Instead of doing - $(this).closest(".comment").children(".comment").show();
    // You can do the following
    $(this).siblings("div.comment").show();
  });

.closest() - looks at the element itself and its parents for a match.

.siblings - Get the siblings of each element in the set of matched elements, optionally filtered by a selector.

Example With .show();

Here an example with .toggle(); If you wanted to show/hide the comment with same button. (Just little extra for you to look at)

Example With .toggle();

UPDATE:

Example with .comment shown on load

Show div after click and hide button

Try this:

function showDiv(elem) {  elem.style.display = 'none';  document.getElementById('welcomeDiv').style.display = "block";}

<div id="welcomeDiv" style="display:none;" class="answer_list">WELCOME</div><input type="button" name="answer" value="Show Div" onclick="showDiv(this)" />

---

Related Topics