[ANSWERED] html – jQuery show and hide div by buttons class

Question 1

You Only need this CSS and JS to do your task. 🙂

jQuery('.mybuttonclass').on('click', function(){
  // Get the number from button ID. 
  var id = jQuery(this).attr('id').replace('button-','');
  // Toggle the visibility.
  jQuery("#intro-" + id).css({"display" : "none"});
  jQuery("#content-" + id).css({"display" : "inline-block"});
});

[id^="content-"] {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
   
   <div id="cont-1">
    <div id="intro-1">
      <p> Some text...</p>
    </div>
    <div id="content-1">
      <p>More explicative text</p>
    </div>
   </div>
   <button id="button-1" class="mybuttonclass"> Click here</button>
    
    <div id="cont-2">
    <div id="intro-2">
      <p> Some text...</p>
    </div>
    <div id="content-2" >
      <p>More explicative text</p>
    </div>
   </div>
   <button id="button-2" class="mybuttonclass"> Click here</button>
   
   <!-- other <div id="cont-x" -->
  
</div>

Question 2

You can use something like this.
I’ve added a data-target="#cont-1" in your button, so you can tagert the div to open.

$(document).ready(function(){
        $(".mybuttonclass").click(function() {
           $("div[id*='cont-']").hide();
           var target = $(this).data('target');
           $(target).toggle();
         });
      });

#cont-1,#cont-2{display:none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
       
       <div id="cont-1">
          <div id="intro-1">
            <p> Some text...</p>
          </div>
          <div id="content-1">
            <p>More explicative text</p>
          </div>
       </div>
       <button id="button-1" class="mybuttonclass" data-target="#cont-1"> Click here</button>
        
        <div id="cont-2">
          <div id="intro-2">
            <p> Some text...</p>
          </div>
          <div id="content-2">
            <p>More explicative text</p>
          </div>
       </div>
       <button id="button-2" class="mybuttonclass" data-target="#cont-2"> Click here</button>
       
       <!-- other <div id="cont-x" -->
      
    </div>

Question 3

a POC for a component like rendering and button action:

let count = 0;

function addCard() {
  const card = `<div class="intro" data-num="${count}">intro</div>
<div class="content hide" data-num="${count}">content</div>
<div class="show-btn" onClick="toggleShow(${count})">SHOW</div>`;
  document.body.innerHTML += card;
  count++;
}

function toggleShow(num) {
  document.querySelector(`.intro[data-num="${num}"]`).classList.toggle("hide");
  document.querySelector(`.content[data-num="${num}"]`).classList.toggle("hide");
}

.add,
.show-btn {
  margin-bottom: 20px;
  cursor: pointer;
}

.hide {
  display: none;
}

<div class="add" onClick="addCard()">ADD</div>

Question 4

As in most cases, this is very easy to achieve using neither

id
nor jQuery.

See:

document.addEventListener('click', function(event) { // delegate listener on document
  if (event.target.matches('button.showmore')) {
    event.target.parentElement.classList.toggle('show-more');
  }
})

.explicative-text {
  display: none;
}

.show-more .explicative-text {
  display: block;
}

<div class="container">

  <div>
    <div class="intro-text">
      <p> Some text...</p>
    </div>
    <div class="explicative-text">
      <p>More explicative text</p>
    </div>
    <button class="showmore"> Click here</button>
  </div>


  <div>
    <div class="intro-text">
      <p> Some text...</p>
    </div>
    <div class="explicative-text">
      <p>More explicative text</p>
    </div>
    <button class="showmore"> Click here</button>
  </div>

</div>

Question 5

IF you need the id for something else fine but for this use classes. Just use a class intro-group for a group and then hidden on elements to hide initially and toggle it, even easier, add a class toggled and use that to target the elements to toggle the class hidden on.

$(function() {
  $(".mybuttonclass").on('click', function() {
    $(this).prev('.intro-group').find(".toggled").toggleClass("hidden");
  });
});

.intro,
.content {
  display: inline-block;
}

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">

  <div class="intro-group">
    <div class="intro toggled">
      <p> Some text...</p>
    </div>
    <div class="content toggled hidden ">
      <p>More explicative text</p>
    </div>
    <div class="toggled hidden ">
      <p>I am another element to toggle</p>
    </div>
  </div>
  <button class="mybuttonclass"> Click here</button>
  <div class="intro-group">
    <div class="intro toggled">
      <p> Some text...</p>
    </div>
    <div class="content toggled hidden">
      <p>More explicative text, I am longer</p>
    </div>
  </div>
  <button class="mybuttonclass"> Click here</button>

</div>

Question 6

I want show hide different div using buttons and JQuery click event. How can I select the right div to show or hide it?

$(document).ready(function(){

  $("#button-1").click(function(){
    $("#intro-1").css({"display" : "none"});
    $("#content-1").css({"display" : "inline-block"});
  });
  
  $("#button-2").click(function(){
    $("#intro-2").css({"display" : "none"});
    $("#content-2").css({"display" : "inline-block"});
  });
  
});

#content-1, #content-2{
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
   
   <div id="cont-1">
    <div id="intro-1">
      <p> Some text...</p>
    </div>
    <div id="content-1">
      <p>More explicative text</p>
    </div>
   </div>
   <button id="button-1" class="mybuttonclass"> Click here</button>
    
    <div id="cont-2">
    <div id="intro-2">
      <p> Some text...</p>
    </div>
    <div id="content-2">
      <p>More explicative text</p>
    </div>
   </div>
   <button id="button-2" class="mybuttonclass"> Click here</button>
   
   <!-- other <div id="cont-x" -->
  
</div>

Now, I need to create a very big number of other div with id=”cont-x” … is it possible create a single function that you can select the right div to show/hide by clicking on a button by class?
Untill now I create a function for every button, and I retrive the dive to show/hide by ID. I would like to use a single function for all the div and select the “this” button by classname. Is it possible?

Bollate

[ANSWERED] html – jQuery show and hide div by buttons class

By

Solution 1 :

Solution 2 :

Solution 3 :

Solution 4 :

Solution 5 :

Problem :

Comments

Comment posted by Mark Schultheiss

Comment posted by Wimanicesir

Comment posted by wrexo

Comment posted by Sfili_81

Comment posted by wrexo

Comment posted by connexo

Comment posted by wrexo

Comment posted by Mark Schultheiss

Comment posted by stackoverflow.com/help/accepted-answer

By

Related Post

[ANSWERED] java – How to send dropdown value to servlet NOT the option text

[ANSWERED] html – How to include a clickable image behind a link

[ANSWERED] html – Move list item to the left in header/navigation menu

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate