How to display specific div onclick using js-CodePudding

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 >
  <ol >
    <li >
      <div >
        <h3>Title here</a>
      </div>
      <div >
        <a > </a>
        <a > </a>
      </div>
      <div >Updated</div>
    </li>
    <li >
      <div >
        <h3>Title here</a>
      </div>
      <div >
        <a > </a>
        <a > </a>
      </div>
      <div >Updated</div>
    </li>
    <li >
      <div >
        <h3>Title here</a>
      </div>
      <div >
        <a > </a>
        <a > </a>
      </div>
      <div >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

CodePudding user response：

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)

CodePudding user response：

Create a toggle function that fires based on your click target, and use a setTimeout for hiding an element after specified time.

function toggle(el, type){
  var target = el.closest('.product_info').find('.display_on_click')
  if(type === "show") target.addClass('display_on_click_show')
  else target.removeClass('display_on_click_show')
}

$('body').on("click", ".more", function() {
  var obj = $(this)
  toggle(obj, "show")
  setTimeout(function(){
    toggle(obj, "hide")
  }, 1000) // This hides after one second, you can set it to 2*60*1000 for 2 minutes
})

$('body').on("click", ".less", function() {
  toggle($(this), "hide")
});

a{ cursor: pointer; }

.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 >
  <ol >
    <li >
      <div >
        <h3>Title here</a>
      </div>
      <div >
        <a > </a>
        <a >-</a>
      </div>
      <div >Updated</div>
    </li>
    <li >
      <div >
        <h3>Title here</a>
      </div>
      <div >
        <a > </a>
        <a >-</a>
      </div>
      <div >Updated</div>
    </li>
    <li >
      <div >
        <h3>Title here</a>
      </div>
      <div >
        <a > </a>
        <a >-</a>
      </div>
      <div >Updated</div>
    </li>
  </ol>
</div>

CodePudding user response：

<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