Отображение и скрытие div в a li

Question

Я знаю, что этот вопрос задан и ответил миллион раз, но по какой-то причине мой просто не работает. Я хочу сделать шоу div на клик внутри «li», и он будет скрыт, пока вы не нажмете на него, но он не хочет скрывать div. Я получил функцию из stackoverflow, но это не сработает. Вот мой код:

HTML:

 <div class="small"> 
    <h2>Bio Technology</h2> 
    <br> 
    <img src="bio.jpg" id="bioTech" alt="bioTech"> 
    <ul> 
     <li id="bioInfo" class="red">Information 
     <div id="bioInfoText">Although biotechnology is a young discipline....</div> 
     </li> 
     <li id="bioFuture" class="orange">Future</li> 
     <li id="bioCont" class="yellow">Content</li> 
     <li id="bioAdd" class="brown">Additional</li> 
     <li id="bioPrac" class="black">Practical</li> 
    </ul> 
</div> 

Вот мой JS:

 $(document).ready(function(){ 
    $("#bioInfoText").hide(); 
    $("#bioInfo").on("click"function(){ 
     $("#bioInfoText").show(); 
     }); 
}; 

Я буду вечно благодарен, если кто-то может помочь, чтобы сделать его работу!

Answer 1

Вот способ сделать это:

По умолчанию, если вы не хотите, чтобы отобразить что-то, держать display: none в инлайн.

HTML:

<div class="small"> 
    <h2>Bio Technology</h2> 
    <br> 
    <img src="bio.jpg" id="bioTech" alt="bioTech"> 
    <ul> 
     <li id="bioInfo" class="red">Information 
     <div id="bioInfoText" style="display: none;">Although biotechnology is a young discipline....</div> 
     </li> 
     <li id="bioFuture" class="orange">Future</li> 
     <li id="bioCont" class="yellow">Content</li> 
     <li id="bioAdd" class="brown">Additional</li> 
     <li id="bioPrac" class="black">Practical</li> 
    </ul> 
</div> 

JS:

$(document).ready(function(){ 
    $('#bioInfo').on('click', function(){ 
    $('#bioInfoText').toggle(); 
    }); 
}); 

Я сделал это toggable, так что если вы нажмете на #bioInfo снова, она будет скрывать снова. Если вы хотите просто показать, вы можете заменить toggle() на show()

Оформить заявку live example here.

Answer 2

использование этого

$(document).ready(function(){ 
 
    $("#bioInfo").on("click", function(){ 
 
     $("#bioInfoText").show(); 
 
    }); 
 
});

#bioInfoText{ 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="small"> 
 
    <h2>Bio Technology</h2> 
 
    <br> 
 
    <img src="bio.jpg" id="bioTech" alt="bioTech"> 
 
    <ul> 
 
     <li id="bioInfo" class="red">Information 
 
     <div id="bioInfoText">Although biotechnology is a young discipline....</div> 
 
     </li> 
 
     <li id="bioFuture" class="orange">Future</li> 
 
     <li id="bioCont" class="yellow">Content</li> 
 
     <li id="bioAdd" class="brown">Additional</li> 
 
     <li id="bioPrac" class="black">Practical</li> 
 
    </ul> 
 
</div>

Answer 3

HTML

<div class="small"> 
<h2>Bio Technology</h2> 
<br> 
<img src="bio.jpg" id="bioTech" alt="bioTech"> 
<ul> 
    <li id="bioInfo" class="red">Information 
    <div id="bioInfoText" style="display: none;">Although biotechnology is a young discipline....</div> 
    </li> 
    <li id="bioFuture" class="orange">Future</li> 
    <li id="bioCont" class="yellow">Content</li> 
    <li id="bioAdd" class="brown">Additional</li> 
    <li id="bioPrac" class="black">Practical</li> 
</ul> 
</div> 

JQuery

$(document).ready(function(){ 
$('#bioInfo').on('click', function(){ 
$('#bioInfoText').toggle(); 
}); 
}); 

Это Fiddle пример

Благодаря