Convert jQuery which shows divs to plain JS

convert jquery to javascript converter
jquery vs vanilla js
convert jquery function to javascript
jquery parents equivalent in javascript
javascript get json from url without jquery
jquery to vanilla javascript cheat sheet
jquery ajax alternative
jquery load in vanilla js

I wrote code which shows all the divs inside content in jQuery, but my boss doesn't want to load the jQuery library and wants to use only Javascript.

That's why I'm here. I will explain you my code

$("#content_caract_1").hide();
$('#caract1').click(function() { // Au clic sur un élément
  $("#content_caract_1").toggle(400); // chache ou affiche a une vitesse constante (400)
});
$('#caract1bis').click(function() { // Au clic sur un élément
  $("#content_caract_1bis").toggle(400); // chache ou affiche a une vitesse constante (400)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="caract1">
  <h2> Etape 1 : Les enjeux et le parcours </h2>
</div>
<div id="content_caract_1">
  <div id="caract1bis">
    <h3> 1.1 Enjeux du programme apollo </h3>
  </div>
  <div id="content_caract_1bis">
    <p>
      <strong>BRAVO !</strong></br>
      </br>
      Vous êtes bien inscrit au parcours « excellence opérationnelle » qui se compose de 3 grandes étapes. Chacune de ces étapes à une durée de 1 à 2 mois.</br>
      </br>
      <strong>VOTRE DÉFI DE LA SEMAINE :</strong></br>
  </div>
</div>

I suggest the use of common classes instead of id's and the use of hide class instead if direct style change.

NOTE: Just a side not </br> must be jsut <br>.

var titles = document.querySelectorAll('.title');

for (var i = 0; i < titles.length; i++) {
  titles[i].addEventListener('click', toggleDisplay);
}

function toggleDisplay() {
  event.stopPropagation();

  this.nextElementSibling.classList.toggle('hide');
}
.hide {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="title">
  <h2> Etape 1 : Les enjeux et le parcours </h2>
</div>
<div class="toggled_div hide">
  <div class="title">
    <h3> 1.1 Enjeux du programme apollo </h3>
  </div>
  <div class="toggled_div">
    <p>
      <strong>BRAVO !</strong>
      <br>
      <br> Vous êtes bien inscrit au parcours « excellence opérationnelle » qui se compose de 3 grandes étapes. Chacune de ces étapes à une durée de 1 à 2 mois.<br>
      <br>
      <strong>VOTRE DÉFI DE LA SEMAINE :</strong>
      <br>
  </div>
</div>

<div class="title">
  <h2> Etape 2 : Les enjeux et le parcours </h2>
</div>
<div class="toggled_div hide">
  <div class="title">
    <h3> 2.1 Enjeux du programme apollo </h3>
  </div>
  <div class="toggled_div">
    <p>
      <strong>BRAVO !</strong>
      <br>
      <br> Vous êtes bien inscrit au parcours « excellence opérationnelle » qui se compose de 3 grandes étapes. Chacune de ces étapes à une durée de 1 à 2 mois.<br>
      <br>
      <strong>VOTRE DÉFI DE LA SEMAINE :</strong>
      <br>
  </div>
</div>

<div class="title">
  <h2> Etape 3 : Les enjeux et le parcours </h2>
</div>
<div class="toggled_div hide">
  <div class="title">
    <h3> 3.1 Enjeux du programme apollo </h3>
  </div>
  <div class="toggled_div">
    <p>
      <strong>BRAVO !</strong>
      <br>
      <br> Vous êtes bien inscrit au parcours « excellence opérationnelle » qui se compose de 3 grandes étapes. Chacune de ces étapes à une durée de 1 à 2 mois.<br>
      <br>
      <strong>VOTRE DÉFI DE LA SEMAINE :</strong>
      <br>
  </div>
</div>

javascript - Convert jQuery which shows divs to plain JS, I wrote code which shows all the divs inside content in jQuery, but my boss doesn​'t want to load the jQuery library and wants to use only  However, you’re referring to the slideDown() method that is part of the jQuery library. Sadly, there is no direct equivalent in plain JavaScript so nothing will happen if you use it. If you want to use an alternative slideDown() method/animation, try Velocity.js that I linked to earlier. There’s a usage demo provided in the tutorial I linked to.

Use below code for simple javascript

 document.getElementById("content_caract_1").style.display = "none";
document.getElementById("caract1").onclick = function () {
    var carat1 = document.getElementById("content_caract_1");
    if (carat1.style.display === "none") {
        carat1.style.display = "block";
    } else {
        carat1.style.display = "none";
    }
}
document.getElementById("caract1bis").onclick = function () {
    var carat_lbis = document.getElementById("content_caract_1bis");
    if (carat_lbis.style.display === "none") {
        carat_lbis.style.display = "block";
    } else {
        carat_lbis.style.display = "none";
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="caract1">
  <h2> Etape 1 : Les enjeux et le parcours </h2>
</div>
<div id="content_caract_1">
  <div id="caract1bis">
    <h3> 1.1 Enjeux du programme apollo </h3>
  </div>
  <div id="content_caract_1bis">
    <p>
      <strong>BRAVO !</strong></br></br>
      Vous êtes bien inscrit au parcours « excellence opérationnelle » qui se compose de 3 grandes étapes. Chacune de ces étapes à une durée de 1 à 2 mois.</br></br>
      <strong>VOTRE DÉFI DE LA SEMAINE :</strong></br>
  </div>
</div>

JavaScript Challenge: Convert JQuery to Plain JavaScript, <p> <p>Your challenge is to convert our jQuery into plain old JavaScript.</p> <​div class="tabs"> <ul class="nav"> <li><a href="tab1.html">Tab 1</a></li> action = 'show'|'hide', revert = bool nodeOpacity.handler; function nodeOpacity(​node,  That's why we've decided to set you a little challenge: convert our jQuery into plain old JavaScript. Successful entries will be those who get things working in any browser without a single jQueryism.

This approach will work for any number of div elements, as long as the HTML structure you've shown stay the same for all divs.

Step 1: Add a CSS class .toggle on the elements which you want to add as a visibility toggler.

Step 2: Initially set an inline style on any togglable elements that are supposed to be initially hidden.

Rest: see code.

// get the toggle elements as an HTMLCollection and convert it to an array...
let togglers = Array.from(document.getElementsByClassName('toggle'))

// so we can then use the array method .forEach() on it
togglers.forEach(function (toggler) {
  // for every element in our togglers collection, add a click listener
  toggler.addEventListener('click', function(event) {
    // check if element is visible
    let visible = this.nextElementSibling.style.display !== "none";
    // depending on the currrent visibility, apply either none or block
    this.nextElementSibling.style.display = visible ? "none" : "block";
  })
})
.toggle { cursor: pointer; }
<div id="caract1">
  <h2> Etape 1 : Les enjeux et le parcours </h2>
</div>
<div id="content_caract_1">
  <div id="caract1bis" class="toggle">
    <h3> 1.1 Enjeux du programme apollo </h3>
  </div>
  <div id="content_caract_1bis" style="display: none;">
    <p>
      <strong>BRAVO !</strong><br/>
      <br/>
      Vous êtes bien inscrit au parcours « excellence opérationnelle » qui se compose de 3 grandes étapes. Chacune de ces étapes à une durée de 1 à 2 mois.<br/>
      <br/>
      <strong>VOTRE DÉFI DE LA SEMAINE :</strong><br/>
  </div>
</div>

Cheat sheet for moving from jQuery to vanilla JavaScript, will help you convert jQuery's most common patterns to vanilla JavaScript. Without jQuery // Hide and show an element by changing "display" to Put together, here's how to create a div, update its text and class, and add  The original jQuery solution only worked after the scrolling was over and that was fine. The problem with the previous vanilla JS solutions was that they didn't even switch the class when scrolling was over, nothing happend at all.

If you want to work with pure JavaScript it will be more easy if you apply all XHTML standards to your html.

The first rule you didn't apply is your div id should be unique. You can get multiple elements by id with jQuery, but it's not apply in pure JavaScript. You should use class name to achieve this.

HTML

<div class="caract1">
    <h2> Etape 1 : Les enjeux et le parcours </h2>
    </div>
    <div class="content_caract_1">
    <div class="caract1bis">
        <h3> 1.1 Enjeux du programme apollo </h3>
    </div>
    <div class="content_caract_1bis">
        <p>
        <strong>BRAVO !</strong><br /><br />
        Vous êtes bien inscrit au parcours « excellence opérationnelle » qui se compose de 3 grandes étapes. Chacune de ces étapes à une durée de 1 à 2 mois.<br /><br />
        <strong>VOTRE DÉFI DE LA SEMAINE :</strong><br />
    </div>
</div>

JavaScript

var divs = document.gelElementsByClassName('content_caract_1bis');

Also, because of XHTML standards you should use <br /> not </br>

.toArray(), Select all divs in the document and return the DOM Elements as an Array; then use the built-in <script src="https://code.jquery.com/jquery-3.5.0.js"></script>. Julian Motz takes a look at jQuery's document.ready() method and shows how it can be replaced with vanilla JS, and is often not needed at all! Get 3 months access to 400+ books and courses for $3

jQuery.parseHTML(), parseHTML uses native methods to convert the string to a set of DOM nodes, which can then be Create an array of DOM nodes using an HTML string and insert it into a div. <script src="https://code.jquery.com/jquery-3.5.0.js"></script>. By design, any jQuery constructor or method that accepts an HTML string — jQuery(), .append(), .after(), etc. — can potentially execute code. This can occur by injection of script tags or use of HTML attributes that execute code (for example, ). Do not use these methods to insert strings obtained

How to convert this jQuery snippet to vanilla JS - JavaScript, It would be enough if I could just show and hide it by adding the class visible to it. This is the jQuery code, I want to convert to vanilla JS: hi, I have to do in plain JavaScript something that I'm much more used to doing in jQuery.. this is for a standard tabbed-content show/hide div switcheroo.. here's the jQuery code: $('.tabs a

Vanilla JS equivalents of jQuery methods · GitHub, Selectors. // jQuery var divs = $('div') // Vanilla var divs = document. From jQuery to JS: A Reference. Also, see the two part series showing equivalents for . Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

Comments
  • Try read this. Show/hide with CSS only. Easy enough to expand to 20 or more: stackoverflow.com/questions/51972655/…
  • But you have to give each parent div an index and duplicate the code for each index. This isn't different if you use CSS, jQuery or plain JS. It's all about finding the right language... IMHO use as little JS as you can.
  • Please note that you </br> tags make your HTML invalid, because it either has to be <br /> (XML-conform) or <br>.
  • Check this one @Nico
  • You didn't completely answer his question. How to achieve this for 20 blocks of text?
  • This is just to give him an idea to convert the code from js to simple javascript. I think he can add events to rest of the divs by himself.
  • Thanks a lot, i will try to do something with that.