Get Specific Div Content Based On Id

Question

I am trying to get specific div content based on id. As an example, I've the following contents one by one in the front-end using div:

Question 1

User clicks next, then the second question within the div and so on will come up. When there will be no questions left and user clicks next again, it'll show the question numbers as follows: Say for three questions at the end, a similar list will appear in the front-end

Question 1 Question 2 Question 3

When user will click in any of the question, it should take the user to that specific question. Notice that, this isn't an anchor and it has to be done using the div section. Here's a fiddle that I was trying to work with - JS Fiddle

In the code, I've a div area that remains hidden initially, specifically the question numbers that'll appear at the end. So it reaches the last question, it enables that div area and shows the question number. Here is the code snippet:

$(".getVal").click(function () {
    var $container = $('.divs').children().eq();

    var id = $(".h2Val").text().trim();
    var id2 = $(this).attr("data-id"); //Assigned data-id to match the question id
    
    if (id.match(id2)) { //When match found, trying to enable the div with question
         $(".hideSection1").show();
         $(".hideSection2").hide();
    }
});

Now the problem I face, is it actually possible to get that specific div with question as this isn't an anchor or href or any better way to overcome this issue? In my case, it shows the question but the last one but required to obtain corresponding questions clicking on question numerbers.

Code Snippet:

$(document).ready(function() {
  $(".hideSection2").hide();

  divs = $(".divs").children();
  divs.each(function(e) {
    if (e != 0)
      $(this).hide();
  });

  var index = 0,
    divs = $(".divs").children();

  //declare
  var indexes = 0;
  $(".button").click(function() {
    //get div length
    var lengths = divs.length;
    //checking if btn clicked is next
    if ($(this).is('#next')) {
      //checking if value if less then length
      if ((indexes < (lengths - 1))) {
        //increment
        //remove 
        $(this).prop('disabled', false);
        $(this).css("background-color", "blue");
        console.log("in  - " + indexes)
        //show div
        index = (index + 1) % divs.length;
        divs.eq(index).show().siblings().hide();
        //to show result
        show_data1(indexes);
        indexes++;
      } else {
        $(".hideSection2").show();
        $(".hideSection1").hide();
        console.log("i am in last question reached")
        $(this).prop('disabled', true); //disable
        $(this).css("background-color", "#00FFFF"); //chnagecolor

        $("#prev").css("background-color", "blue");

      }
    } else if ($(this).is('#prev')) {
      //chcking id value is not 0
      if (indexes != 0) {
        //remove 
        $(this).prop('disabled', false);
        $(this).css("background-color", "blue");
        indexes--;
        //show
        index = (index - 1) % divs.length;
        divs.eq(index).show().siblings().hide();
        console.log("back  - " + indexes)
        show_data1(indexes); //show result
      } else {
        console.log("no back question")
        //disabled
        $(this).prop('disabled', true);
        //add color chnage
        $(this).css("background-color", "#00FFFF");
        $("#next").css("background-color", "blue");

      }
    }
  });

  function show_data1(indexes1) {
    //pass indexes value to get required div
    var $container = $('.divs').children().eq(indexes1);

    var id = $container.find(".h2Val").text().trim();
    var $checked = $container.find('.cbCheck:checked');
    var values = $checked.map(function() {
      return this.value
    }).get();
    //console.clear()
    console.log('ID: ' + id + ' has ' + $checked.length + ' checked');
    console.log('Values: ', values.join())

  }

  $(".getVal").click(function() {
    var $container = $('.divs').children().eq();

    var id = $(".h2Val").text().trim();
    var id2 = $(this).attr("data-id");
    //alert($(this).attr("data-id"));

    if (id.match(id2)) {
      //alert(id + $(this).attr("data-id"));
      $(".hideSection1").show();
      $(".hideSection2").hide();
    }
  });
});



  
    
      1
      What's the capital of England?
      
        London
      
      
        New York
      
    

    
      2
      Who invented computer?
      
        Thomas Edison
      
      
        Charles Babbage
      
      
        Sir Isaac Newton
      
    
    
      3
      Who invented computehttr?
      
        Thomas Edison
      
      
        Charles Babbage
      
    
  

  Previous
  Next



  
    
      
        1
        2
        3

Swati · Accepted Answer

You don't need to compare if (id.match(id2)) { because your questions are shown in sequence so we can use divs.eq(id).. to show only div which is clicked by user and to show answer we can pass this id value to show_data1(indexes1) to show answer as well when question is clicked.Also , i have subtract one from the id value because div index will start from 0.

Demo Code :

$(document).ready(function() {
  $(".hideSection2").hide();

  divs = $(".divs").children();
  divs.each(function(e) {
    if (e != 0)
      $(this).hide();
  });

  var index = 0,
    divs = $(".divs").children();

  //declare
  var indexes = 0;
  $(".button").click(function() {
    //get div length
    var lengths = divs.length;
    //checking if btn clicked is next
    if ($(this).is('#next')) {
      //checking if value if less then length
      if ((indexes < (lengths - 1))) {
        //increment
        //remove 
        $(this).prop('disabled', false);
        $(this).css("background-color", "blue");
        console.log("in  - " + indexes)
        //show div
        index = (index + 1) % divs.length;
        divs.eq(index).show().siblings().hide();
        //to show result
        show_data1(indexes);
        indexes++;
      } else {
        $(".hideSection2").show();
        $(".hideSection1").hide();
        console.log("i am in last question reached")
        $(this).prop('disabled', true); //disable
        $(this).css("background-color", "#00FFFF"); //chnagecolor

        $("#prev").css("background-color", "blue");

      }
    } else if ($(this).is('#prev')) {
      //chcking id value is not 0
      if (indexes != 0) {
        //remove 
        $(this).prop('disabled', false);
        $(this).css("background-color", "blue");
        indexes--;
        //show
        index = (index - 1) % divs.length;
        divs.eq(index).show().siblings().hide();
        console.log("back  - " + indexes)
        show_data1(indexes); //show result
      } else {
        console.log("no back question")
        //disabled
        $(this).prop('disabled', true);
        //add color chnage
        $(this).css("background-color", "#00FFFF");
        $("#next").css("background-color", "blue");

      }
    }
  });

  function show_data1(indexes1) {
    //pass indexes value to get required div
    var $container = $('.divs').children().eq(indexes1);

    var id = $container.find(".h2Val").text().trim();
    var $checked = $container.find('.cbCheck:checked');
    var values = $checked.map(function() {
      return this.value
    }).get();
    //console.clear()
    console.log('ID: ' + id + ' has ' + $checked.length + ' checked');
    console.log('Values: ', values.join())

  }

  $(".getVal").click(function() {
//get id
  var id = $(this).attr("data-id");
    $(".hideSection1").show();
    $(".hideSection2").hide();
    //subtract one , because div starts from 0 ,1..etc
    var new_id= id - 1;
   //show div
    divs.eq(new_id).show().siblings().hide();
    index = new_id; //settting value of index again for click of next button
    indexes = new_id; //setting value for index
    show_data1(indexes) //show answer as well when user click of question no.

  });
});



  
    
      1
      What's the capital of England?
      
        London
      
      
        New York
      
    

    
      2
      Who invented computer?
      
        Thomas Edison
      
      
        Charles Babbage
      
      
        Sir Isaac Newton
      
    
    
      3
      Who invented computehttr?
      
        Thomas Edison
      
      
        Charles Babbage
      
    
  

  Previous
  Next



  
    
      
        1
        2
        3

Get Specific Div Content Based On Id

Answers (1)

Related Questions