Toggling html List items with JavaScript

0 votes
asked Sep 13, 2017 by awwhhh-rubbish

Using jquery...

I am attempting to click on a term or concept to see the definition appear (my list items). When I click on the definition, I want it to be replaced with the term or concept.

I attempted to use unique id's to separate each of the p & li to make them respond to the clicks individually. I added a href= "#" in my html to make each list item a link to click.

However, when I run the code the click operates on all four of the "java-showing" and "java-hiding" divs all at the same time. This results in the page only toggling between the first two list items "JavaScript (JS), & Operators" and the definition of JavaScript "An object-oriented...".

First why am I only getting one definition on click? I would expect 2...

If anyone can help me this would be great, I am incredibly new to Javascript, html, css.

//HTML

<body>
<ul>
 <div class ="java-hiding">
 <li id="li1" <a href="#"> JavaScript (JS)</a></li>
 </div>
 <div class ="java-showing">
   <p id="p1" <a href="#">An object-oriented computer programming language commonly used to create interactive effects within web browsers.</a></p>
 </div>
 <div class="java-hiding">
  <li id="li2" <a href="#">Operators</a></li>
  <div class ="java-showing">
    <p id ="p2" <a href="#">constructs which behave generally like functions, but which differ syntactically or semantically from usual functions</a></p>
  </div>
</ul>

//Java Script

$(document).ready(function() {
  $("li#li1, p#p1, li#li2, p#p2").click(function() {
   $(".java-showing").toggle();
   $(".java-hiding").toggle();
});
});

///CSS

.java-showing { display:none; }

2 Answers

0 votes
answered Sep 13, 2017 by ssilas777

Your Html is not well structured, since your class name is same the event will operates on all elements which is expected.

Also you don't have to put Id's for each element to achieve your functionality.

Are you looking for a behavior like this - FIDDLE

 <div class ="java-hiding">
    <li id="li1"><a href="#"> JavaScript (JS)</a></li>
 </div>
 <div class ="java-showing">
    <p id="p1">
      <a href="#">An object-oriented computer programming language commonly used to create interactive effects within web browsers.</a>
    </p>
 </div>
 <div class="java-hiding">
    <li id="li2"> <a href="#">Operators</a></li>
  </div>
  <div class ="java-showing">
    <p id ="p2">
      <a href="#">constructs which behave generally like functions, but which differ"#">constructs which behave generally like functions, but which differ syntactically or semantically from usual functions</a>
     </p>
  </div>

Jquery:

$(document).ready(function() {
  $("li").click(function() {
     $(this).parent().next().toggle(); 
  });
  $("p").click(function() {
     $(this).parent().toggle(); 
  });    
});
0 votes
answered Sep 13, 2017 by andre-mcgruder

It's going to operate on all of the java-showing and java-hiding elements because they are classes. So they are are a collection. Also both of them are the selected to toggle in your click function.

This is what I think you want for your HTML.

<ul>
    <li id="li1" class ="java-hiding">
        <a href="#"> JavaScript (JS)</a>
    </li>
    <p id="p1" class="java-showing">
        <a href="#">An object-oriented computer programming language commonly used to create interactive effects within web browsers.</a>
    </p>
    <li id="li2" class="java-hiding">
        <a href="#">Operators</a>
    </li>
    <p id="p2" class="java-showing">
        <a href="#">constructs which behave generally like functions, but which differ syntactically or semantically from usual functions</a>
    </p>
</ul>
Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
...