Show Multiple Divs on Button Click

JavaScript: Display Multiple Divs on Single Button Click

you can try this, use a variable where you store the current id and each time you increment it by 1 :

var count = 2;var countMax = 5;
function adddt() {  if(count > countMax)    return;  document.getElementById('dt-' + count + '').style.display = 'block';  count++;}

<div id='dt-1'>  <label>Destination 1</label>  <input type="text">  <input type="number"></div>
<div id='dt-2' style="display:none;">  <label>Destination 2</label>  <input type="text">  <input type="number"></div>
<div id='dt-3' style="display:none;">  <label>Destination 3</label>  <input type="text">  <input type="number"></div>
<div id='dt-4' style="display:none;">  <label>Destination 4</label>  <input type="text">  <input type="number"></div>
<div id='dt-5' style="display:none;">  <label>Destination 5</label>  <input type="text">  <input type="number"></div>
<input type="button" onclick="adddt()" value="add more destinations">

Show multiple divs on button click

You could assign a class to everything you need to be "toggable"

<div class="toggable">
  one
</div>
<div class="toggable">
  two
</div>

<button id="hide-stuff">
  toggle
</button>

Then catch the all in one call like this

$('#hide-stuff').click(function() {
    $('.toggable').toggle();
})

Multiple Div with a Button for each Div to Toggle Show/Hide the Div

You can make this more generic by giving the HTML elements common classes instead of individual ids, and then having just one click handler bound to anchors of the specified class - within the handler, use DOM navigation/traversal methods to get to the associated content div:

$("a.showmore").click(function(e) {  e.preventDefault();  $(this).parent().next().slideToggle("fast");});

.morehidden { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div>Testestesttestetstests<a href="#" class="showmore">Show More</a></div><div class="morehidden">Contents Contents Contents</div>
<div>Testestesttestetstests<a href="#" class="showmore">Show More</a></div><div class="morehidden">Contents Contents Contents</div>
<div>Testestesttestetstests<a href="#" class="showmore">Show More</a></div><div class="morehidden">Contents Contents Contents</div>

How to change style of multiple div on click of a button

When you are referring to divmark at the movediv function you are referring to the last div you made.
Instead you should refer to a class of that div since all of the divs you made have the same classes if I understand correctly.
So you can use jquery to add the style to the class like so:

$('.markers').css({'top': yCord + "px", 'left': xCord + "px"})

That will add the styling to all the elements that have the class markers.
If you have other elements with that class that you do not want to have those styles then you should add a unique class for those divs you made at divmark.classList.

Show div on button click with multiple divs

Since you are using Angular JS, this can be done elegantly in Angular way. When clicking on the button, you can introduce a variable to list to indicate whether the div should be displayed or not, and then on the div use ng-show referencing that variable to determine whether it should be show or hide.

  angular.module('test', [])    .controller('MainCtrl', function($scope) {      $scope.listsdata = {        lists: [{id: 1, name: 'list 1'}, {id: 2, name: 'list 2'}, {id: 3, name: 'list 3'}]      };    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <div ng-app="test" ng-controller="MainCtrl">    <div ng-repeat="lists in listsdata.lists">
      <div id="DIV_24">        <button ng-click="lists.show = !lists.show">:</button>        <div class="popup_information" ng-show="lists.show">          <a href="">            <button id="DELETE_BUTTON">X</button>          </a>          <a href="">            <button id="EDIT_BUTTON">E</button>          </a>        </div>        <a href="#/{{lists.id}}">          <div id="DIV_25">            {{lists.name}}          </div>          <div id="DIV_26">          </div>      </div>      </a>    </div>  </div>

Toggle show hide for multiple divs with one button

Okay,

this was a pain in the ass but I think with a lot of workaround I solved it. Here is what I wanted to achive. Having three buttons and three divs. When I click one button alls three divs disappear and all three buttons change text to "hide". When click again, vice versa. I hope this helps everyone out there. I think to trigger all "classes" is in css much easier. These were my first steps in javascript and it was as difficult as chinese for me (don´t speak it :)).

// Toggle all buttons texts

function change() {
  var x = document.querySelectorAll("#button");
  var i;
  for (i = 0; i < x.length; i++) {
    if (x[i].value == "Zeige Features") {
      x[i].value = "Verstecke Features";
    } else {
      x[i].value = "Zeige Features";
    }
  }
}

// Toggle show and hide divs

function showhide() {
  var x = document.querySelectorAll("#toggle-div");
  var i;
  for (i = 0; i < x.length; i++) {
    if (x[i].style.display === "block") {
      x[i].style.display = "none";
    } else {
      x[i].style.display =
        "block";
    }
  }
}

<!--Inserting 3 buttons-->

<input onclick="change();showhide()" type="button" value="Zeige Features" id="button"></input>
<input onclick="change();showhide()" type="button" value="Zeige Features" id="button"></input>
<input onclick="change();showhide()" type="button" value="Zeige Features" id="button"></input>

<!--Inserting 3 divs-->

<div id="toggle-div"> div 1 </div>
<div id="toggle-div"> div 2 </div>
<div id="toggle-div"> div 3 </div>

Can we use same button to hide/show multiple divs

You are using the same id twice. This is not allowed. I've changed your HTML to correct this problem. I hope this helps.

function show(elementId) {    let divs = Array.from(document.querySelectorAll("[id ^= 'did']"));   let imgs = Array.from(document.querySelectorAll("[id ^= 'iid']"));   divs.forEach(d=>{d.style.display="none"})   imgs.forEach(i=>{i.style.display="none"})   document.getElementById("d"+elementId).style.display="block";   document.getElementById("i"+elementId).style.display="block";    }

<div class="row">   <div class="col-4 col-sm-2 col-lg-2">      <div class="mx-2"><a id="me" class="trans-btn selected" onclick="show('id1');">Widget1</a></div>      <div class="mx-2"><a id="me" class="trans-btn" onclick="show('id2');">Widget2</a></div>      <div class="mx-2"><a id="me" class="trans-btn" onclick="show('id3');">Widget3</a></div>   </div><!--1st 3 divs-->   <div class="col-8 col-sm-5 col-lg-5">      <div class="mx-2" id="did1">         <h3>Tabs with soft transitioning effect.</h3>         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod             bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra             justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque             penatibus et magnis dis parturient montes.         </p>         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod             bibendum laoreet.         </p>         <a class="btn-warning" href="">Download</a>      </div>      <div class="mx-2" id="did2" style="display:none;">         <h3>Tabs Different effect.</h3>         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod             bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra             justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque             penatibus et magnis dis parturient montes.         </p>         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod             bibendum laoreet.         </p>         <a class="btn-warning" href="">Download</a>      </div>      <div class="mx-2" id="did3" style="display:none;">         <h3>Tabs most of effect.</h3>         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod             bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra             justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque             penatibus et magnis dis parturient montes.         </p>         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod             bibendum laoreet.         </p>         <a class="btn-warning" href="">Download</a>      </div>   </div>
<!--next 3 divs(image section)-->   <div class="col-12 col-sm-5 col-lg-5 last-sec">      <div class="mx-2" id="iid1"><img class="img-fluid" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/pin.png"/></div>      <div class="mx-2" id="iid2" style="display:none;"><img class="img-fluid" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/cat.svg#blackcat"/></div>      <div class="mx-2" id="iid3" style="display:none;"><img class="img-fluid" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/cat.svg#redcat"/></div>   </div></div>