CODEWITHSUNDEEP
javascriptjquerycss
Chinovski
Chinovski

Reputation: 517

How to show ul items on click?

This is my code:

var nbrCliques = 0;
var selecteur = "#art"+nbrCliques;

$('#clique').on('click', function() { $(selecteur).show();});
$(selecteur).on('click', function() { nbrCliques++; selecteur="#art"+nbrCliques; $(selecteur).show(); });
.item {
	display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
    <h1 id="clique">Liste des articles !</h1>
	<ul>
        <li class="item" id="art0">Article 1</li>
		<li class="item" id="art1">Article 2</li>
		<li class="item" id="art2">Article 3</li>
		<li class="item" id="art3">Article 4</li>
	</ul>
</div>

Well, what I am trying to do is to show the article N+1 when I click on the article N. I used different CSS selectors before, but I finally chose this code. The problem is that it works only for the first item, when I click on "Liste des articles" it shows item 1, when I click on it it shows item 2, but when I click on item 2 it doesn't show item 3, it is showen only by clicking on item 1, the same thing for item 4.

I cannot find the problem because I used consol.log to show variables and it seems changing, but finally it doesn't work.

Could you help me? Thank you in advance :D

Upvotes: 3

Views: 1598

Answers (5)

Ronnie Smith
Ronnie Smith

Reputation: 18555

This works.

<!DOCTYPE html>
<html lang="en-us">

<head>
    <meta charset="utf-8">
    <title>js</title>
    <style type="text/css">
        .hide{
            display:none;
        }
        .bold{
            font-weight:bold;
        }
    </style>
</head>
<body>

    <div>
        <h1 id="clique">Liste des articles !</h1>
    	<ul>
            <li class="item" id="art0">Article 1</li>
    		<li class="item" id="art1">Article 2</li>
    		<li class="item" id="art2">Article 3</li>
    		<li class="item" id="art3">Article 4</li>
    	</ul>
    </div>
    
    <div class="article0">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    </div>
    <div class="article1">
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
    <div class="article2">
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
    <div class="article3">
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>


    <script> 
        var doc = document;
        doc.addEventListener("DOMContentLoaded", function(event) {
            
            var div = doc.getElementsByTagName('div')[0];
            var h1 = doc.getElementById("clique");
            var ul = doc.getElementsByTagName('ul');
            var li = doc.getElementsByClassName("item");
            var art0 = doc.getElementsByClassName("article0")[0];
            var art1 = doc.getElementsByClassName("article1")[0];
            var art2 = doc.getElementsByClassName("article2")[0];
            var art3 = doc.getElementsByClassName("article3")[0];
            var articles = [art0,art1,art2,art3];
            
            //hide articles and li's
            toggleAllArticles();
            toggleAllLi();
            
            h1.addEventListener("click", function(){
                toggleAllLi();
                hideAllArticles();
            });
            // add listener to each list item
            for (var i = 0; i < li.length; i++) {
                li[i].addEventListener("click", function(){
                    removeAllLiBold();
                    hideAllArticles();
                    this.classList.toggle('bold');
                    //li[i].classList.toggle('hide');
                    switch (this.id) {
                        case 'art0':
                            art0.classList.toggle('hide');
                            break;
                        case 'art1':
                            art1.classList.toggle('hide');
                            break;   
                        case 'art2':
                            art0.classList.toggle('hide');
                            break;
                        case 'art3':
                            art1.classList.toggle('hide');
                            break; 
                    }
                });
            }
            function toggleAllArticles(){
                for (i = 0; i < articles.length; i++) {
                    articles[i].classList.toggle('hide');
                }                
            }
            function hideAllArticles(){
                for (i = 0; i < articles.length; i++) {
                    articles[i].classList.add('hide');
                }                
            }
            function toggleAllLi(){
                for (var i = 0; i < li.length; i++) {
                    li[i].classList.toggle('hide');
                    
                }
            }
            function removeAllLiBold(){
                for (var i = 0; i < li.length; i++) {
                    li[i].classList.remove('bold');
                    
                }
            }
        });
    </script>
</body>
</html>

Upvotes: 0

Kuan
Kuan

Reputation: 11389

is this like what u want?

    $("ul").hide();
    $('#clique').on('click', function() {
      $("ul").show();
    });
    $("li").on('click', function() {
      $(this).next().show();
    });
    .item {
      display: none;
    }
    .item#art0 {
      display: inline;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <h1 id="clique">Liste des articles !</h1>
  <ul>
    <li class="item" id="art0">Article 1</li>
    <li class="item" id="art1">Article 2</li>
    <li class="item" id="art2">Article 3</li>
    <li class="item" id="art3">Article 4</li>
  </ul>
</div>

Upvotes: 0

Keatinge
Keatinge

Reputation: 4341

I think it's a bad idea to keep a global variable of the number of clicks and calculate based off that when you can just use this to figure out which id was clicked, then add one to that.

I got it working by doing a $(".item").click() to get all the clicks on articles, then I used a string split to get the number of the article, next I added one to that id. Finally I show the item using the new selector.

https://jsfiddle.net/0e6oqymc/

JS: (I didn't modify any html or css)

var nbrCliques = 0;
var selecteur = "#art" + nbrCliques;

$("#clique").click(function() {
  //show the first item when they click the <h1>
  $("#art0").show();
});

$(".item").click(function() {
  //get id number of clicked element as string. for example art0 -> "0"
  var thisId = this.id.split("art")[1];

  //convert to integer and add one
  var newId = parseInt(thisId) + 1;

  //build new selector for art(n+1)
  var newSelector = "#art" + newId;

  //finally show the item using the new selector
  $(newSelector).show();
});

Note that the $(".item").click() function can be reduced to just this (I just wanted to show what the code was doing)

$(".item").click( function () {
    $("#art" + String(parseInt(this.id.split("art")[1]) + 1)).show()
});

Upvotes: 1

SaidbakR
SaidbakR

Reputation: 13534

You are able to use next as follows:

$(".item").on('click', function() { $(this).removeClass('item'); $(this).next().show() })

Here we remove the class item from the element to prevent its selection again and then show its next one.

A live demo is here

Upvotes: 0

Lirianer
Lirianer

Reputation: 203

I added the data-id="x" attribute wich then can be retrieved by jQuery and plus 1 to show the next item.

  • Added data-id attribute to items
  • Changed the function $("#clique").on("click")
  • Added $(".item").on("click") 

$('#clique').on('click', function() {
  $(".item[data-id=1]").show();
});

$('.item').on('click', function() {
  $(".item[data-id=" + ($(this).data("id") + 1) + "]").show();
});
.item {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <h1 id="clique">Liste des articles !</h1>
  <ul>
    <li class="item" data-id="1">Article 1</li>
    <li class="item" data-id="2">Article 2</li>
    <li class="item" data-id="3">Article 3</li>
    <li class="item" data-id="4">Article 4</li>
  </ul>
</div>

Upvotes: 1

Related Questions