Vous essayez de créer un affichage/masquer le contenu à l'aide de jQuery?

Question

Donc, j'ai une liste de liens, lorsque l'on clique sur l'un div avec le contenu devrait afficher, assez facile, mais ma solution ne fonctionne pas, des idées?

Aussi je cette Bordée a commenté parce que je ne suis pas sûr que je besoin de ce depuis que je suis déjà caché et l'affichage divs en changeant leur classe css, (droit?)

// $('').toggleClass(''); --- Not sure if I need this? AND how I'd use it?.. 

/* Service Panel - toggle */ 
 
(function($) { 
 

 
    $(document).ready(function() { 
 

 
     $(document).ready(function() { 
 
     // $('').toggleClass(''); --- Not sure if I need this? AND how I'd use it?.. 
 
     $('#family-law-item').click(function() { 
 
      $(".hide-other-desc").css({ 
 
      "display": "none" 
 
      }); 
 
      $(".family-law-desc").css({ 
 
      "display": "block" 
 
      }); 
 
     }); 
 
     $('#stock').click(function() { 
 
      $(".hide-other-desc").css({ 
 
      "display": "none" 
 
      }); 
 
      $(".criminal-law-desc").css({ 
 
      "display": "block" 
 
      }); 
 
     }); 
 
     $('#workshop').click(function() { 
 
      $(".hide-other-desc").css({ 
 
      "display": "none" 
 
      }); 
 
      $(".corporate-law-desc").css({ 
 
      "display": "block" 
 
      }); 
 
     }); 
 
     $('#all-courses').click(function() { 
 
      $(".hide-other-desc").css({ 
 
      "display": "none" 
 
      }); 
 
      $(".international-law-desc").css({ 
 
      "display": "block" 
 
      }); 
 
     }); 
 

 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section class="services-panel"> 
 
    <nav class="services-items"> 
 
    <li id="family-law-item"><a href="#"> Family Law</a></li> 
 
    <li id="criminal-law-item"><a href="#"> Criminal Law</a></li> 
 
    <li id="corporate-law-item"><a href="#"> Corporate Law</a></li> 
 
    <li id="international-law-item"><a href="#"> International Law</a></li> 
 
    </nav> 
 
    <div class="service-desc-wrap"> 
 
    <article id="family-law-desc hide-other-desc"> 
 
     aaaaaaaaaaaaaaaaaaaaaaaaaaaaLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make 
 
     a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and 
 
     more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br> 
 
    </article> 
 
    <article id="criminal-law-desc hide-other-desc"> 
 
     bbbbbbbbbbbbbbbbLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen 
 
     book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently 
 
     with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br> 
 
    </article> 
 
    <article id="corporate-law-desc hide-other-desc"> 
 
     ccccccccccccccccccLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen 
 
     book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently 
 
     with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br> 
 
    </article> 
 
    <article id="international-law-desc hide-other-desc"> 
 
     ddddddddddddddddddddddddddLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a 
 
     type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and 
 
     more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br> 
 
    </article> 
 
    </div> 
 
</section>

Answer 1

1. Utilisez .hide() et .show().
2. Modifiez id en class dans votre code HTML sur les balises article.
3. Modifiez vos sélecteurs jQuery en fonction de vos liens.

Vous devez avoir un seul id par élément et que id doit être unique pour le entire document.

(function($) { 
 

 
    $('#family-law-item').click(function() { 
 
    $(".hide-other-desc").hide(); 
 
    $(".family-law-desc").show(); 
 
    }); 
 

 
    $('#criminal-law-item').click(function() { 
 
    $(".hide-other-desc").hide(); 
 
    $(".criminal-law-desc").show(); 
 
    }); 
 

 
    $('#corporate-law-item').click(function() { 
 
    $(".hide-other-desc").hide(); 
 
    $(".corporate-law-desc").show(); 
 
    }); 
 

 
    $('#international-law-item').click(function() { 
 
    $(".hide-other-desc").hide(); 
 
    $(".international-law-desc").show(); 
 
    }); 
 

 
}(jQuery));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<section class="services-panel"> 
 
    <nav class="services-items"> 
 
    <li id="family-law-item"><a href="#"> Family Law</a></li> 
 
    <li id="criminal-law-item"><a href="#"> Criminal Law</a></li> 
 
    <li id="corporate-law-item"><a href="#"> Corporate Law</a></li> 
 
    <li id="international-law-item"><a href="#"> International Law</a></li> 
 
    </nav> 
 
    <div class="service-desc-wrap"> 
 
    <article class="family-law-desc hide-other-desc"> 
 
     aaaaaaaaaaaaaaaaaaaaaaaaaaaaLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make 
 
     a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and 
 
     more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br> 
 
    </article> 
 
    <article class="criminal-law-desc hide-other-desc"> 
 
     bbbbbbbbbbbbbbbbLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen 
 
     book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently 
 
     with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br> 
 
    </article> 
 
    <article class="corporate-law-desc hide-other-desc"> 
 
     ccccccccccccccccccLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen 
 
     book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently 
 
     with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br> 
 
    </article> 
 
    <article class="international-law-desc hide-other-desc"> 
 
     ddddddddddddddddddddddddddLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a 
 
     type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and 
 
     more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br> 
 
    </article> 
 
    </div> 
 
</section>

Quant à .toggleClass(), il fonctionne comme ceci:

if the element does not have the class: 
    add the class 
if the element already has the class: 
    remove the class 

Answer 2

vous pouvez essayer le code suivant:

<div id="dataDiv"> 
    <p>Hello How are you?</p> 
</div> 

<script> 
function toggle() 
{ 
    $('#dataDiv').toggle(); 
} 
</script> 

Answer 3

Beaucoup comme vous pouvez réaliser que maintenant vous peut essayer le code suivant:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
<script> 
$(document).ready(function() { 
    $('.services-items a').click(function(){ 
     $('.service-desc-wrap article').hide(); 
     $($(this).attr('href')).show(); 
     return false 
    }) 
}) 

<body> 
<style> 
.hide { display:none;} 
</style> 
<section class="services-panel"> 
<nav class="services-items"> 
    <li id="family-law-item"><a href="#family-law-desc"> Family Law</a></li> 
    <li id="criminal-law-item"><a href="#criminal-law-desc"> Criminal Law</a></li> 
    <li id="corporate-law-item"><a href="#corporate-law-desc"> Corporate Law</a></li> 
    <li id="international-law-item"><a href="#international-law-desc"> International Law</a></li> 
</nav> 
<div class="service-desc-wrap"> 
    <article id="family-law-desc"> 
     aaaaaaaaaaaaaaaaaaaaaaaaaaaaLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>   
    </article> 
    <article id="criminal-law-desc" class="hide"> 
     bbbbbbbbbbbbbbbbLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>   
    </article> 
    <article id="corporate-law-desc" class="hide"> 
     ccccccccccccccccccLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>   
    </article> 
    <article id="international-law-desc" class="hide"> 
     ddddddddddddddddddddddddddLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>   
    </article>   
    </div> 
</section> 
</body> 
</html>