jquery issue to select element

Question

I have code block as follows... two show/hide two divs. i.e. toggle between the divs.

<li class="col-sm-6 col-md-4 col-lg-3">
     <div id="front" class="riddles-border">
        <div class="reddle-question"><p>Question 1</p></div>
        <div class="riddle-ans"><a href="javascipt:void(0)" onclick="openAns(this)">Answer</a></div>
     </div>
     <div id="back" class="riddle-sliding-content">
        <a href="avascipt:void(0)" onclick="closeAns(this)"><span class="toggle-button r-close"></span> </a>
        <div class="r-answer"><p>Answer 1</p>
     </div>
     </div>
 </li>

 <li class="col-sm-6 col-md-4 col-lg-3">
     <div id="front" class="riddles-border">
        <div class="reddle-question"><p>Question 2</p></div>
        <div class="riddle-ans"><a href="javascipt:void(0)" onclick="openAns(this)">Answer</a></div>
     </div>
     <div id="back" class="riddle-sliding-content">
        <a href="avascipt:void(0)" onclick="closeAns(this)"><span class="toggle-button r-close"></span> </a>
        <div class="r-answer"><p>Answer 2</p>
     </div>
     </div>
 </li>

Now when the openAns() is clicked, I want to fadeout $('front') div and fadein $('back') div. And, when closeAns() is clicked, I want to fadein $('front') div and fadeout $('back') div. I am not able to get the div from the clicked <a> element in jquery. Can anyone help?

Answer 1

You have to set class instead of id for div's because id should be unique and use like this

 function openAns(anchor)
{

    $(anchor).parent('div').parent('div').next('div.back:hidden').fadeIn();
    $(anchor).parent('div').parent('div').fadeOut();

}

function closeAns(anchor)
{
   
      $(anchor).parent('div').prev('div.front:hidden').fadeIn();
    $(anchor).parent('div').fadeOut();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="col-sm-6 col-md-4 col-lg-3">
     <div id="" class="riddles-border front">
        <div class="reddle-question"><p>Question 1</p></div>
        <div class="riddle-ans"><a href="javascipt:void(0)" onclick="openAns(this)">Answer</a></div>
     </div>
     <div id="" class="riddle-sliding-content back" style="display:none">
        <a href="avascipt:void(0)" onclick="closeAns(this)"><span class="toggle-button r-close"></span>Question </a>
        <div class="r-answer"><p>Answer 1</p>
     </div>
     </div>
 </li>

 <li class="col-sm-6 col-md-4 col-lg-3">
     <div id="" class="riddles-border front">
        <div class="reddle-question"><p>Question 2</p></div>
        <div class="riddle-ans"><a href="javascipt:void(0)" onclick="openAns(this)">Answer</a></div>
     </div>
     <div id="" class="riddle-sliding-content back" style="display:none">
        <a href="avascipt:void(0)" onclick="closeAns(this)"><span class="toggle-button r-close"></span>Question </a>
        <div class="r-answer"><p>Answer 2</p>
     </div>
     </div>
 </li>