Question

0

76

Views

How to display specific div onclick using js

I have multiple

with various div inside. On click of more or less a tag I want to display specific

i.e. display_on_click

And I want to add that class only for 2 minutes after that remove that class and hide div

My HTML code as below:

$('body').on("click", ".more, .less", function() {
  var obj = $(this);
  obj.closest('.product_info').find('.display_on_click').addClass('display_on_click_show');
});

.display_on_click {
  display: none
}

.display_on_click.display_on_click_show {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
  <ol class="item_wrapper">
    <li class="product_info">
      <div class="title">
        <h3>Title here</a>
      </div>
      <div class="incre_decre">
        <a class="more">+</a>
        <a class="less">+</a>
      </div>
      <div class="display_on_click">Updated</div>
    </li>
    <li class="product_info">
      <div class="title">
        <h3>Title here</a>
      </div>
      <div class="incre_decre">
        <a class="more">+</a>
        <a class="less">+</a>
      </div>
      <div class="display_on_click">Updated</div>
    </li>
    <li class="product_info">
      <div class="title">
        <h3>Title here</a>
      </div>
      <div class="incre_decre">
        <a class="more">+</a>
        <a class="less">+</a>
      </div>
      <div class="display_on_click">Updated</div>
    </li>
  </ol>
</div>

Anyone have idea what I am doing wrong then let me know. And I want to add that class only for 2 minutes after that remove that class and hide

7 months ago · Juan Pablo Isaza

2 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-06-30T10:15:39.919Z

I would do it like this:

$('body').on("click", ".more, .less", function() {
  let parentLi = $(this).parent().parent();

  let elementToManipulate = obj.find('.display_on_click');
  elementToManipulate.addClass('display_on_click_show');

  setTimeout(()=> {
     elementToManipulate.removeClass('display_on_click_show')
  }, 120000);
});

Instead of using closests I'm grabbing the parent of the parent which is the <li>. You can use closest to grab it. Once I am in the parent li, I find the child with the .display... class (the elementToManipulate object).

Then I add the classes and create a setTimeout to remove the class after 120.000 miliseconds (60sec * 2 * 1000msec)

Answer 2 · 2022-06-30T10:15:39.928Z

<button onClick='OpenDiv'>Open</button>

function OpenDiv(){
    let div = document.getElementById('BoxOne')
    if (div.style.display == 'flex') {
        div.style.display = 'none';
    else
        div.style.display = 'flex';
}

I hope this will work 👍