CODEWITHSUNDEEP
jquerycsshtml
user1843335
user1843335

Reputation: 43

Dynamic content display with jQuery

I have an ordered list of links that I want to display it's content underneath it when clicked, and then collapse when other links are clicked. This is what I have done so far. There are abnormalities in the display. jsfiddle

<html>
<head>
<title>Jquery Change content of Div</title>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript" language="javascript"> 

jQuery(document).ready(function(){
        var $j = jQuery;    


$j('.biocontent div:not(:first-child)').hide();
$j('.services li a').click(function(){
    var showclass = $j(this).attr('class');
    $j('.biocontent div').fadeOut('fast',function(){
        $j('.biocontent div.' + showclass).show();
        });
});
});
</script>
</head>
<body>
<ul class="services">
<li><a class="div1" href="#"><h2>Div 1</h2></a></li>
<div class="biocontent ">
<div class="div1">
<p>Content1</p>
</div>
</div>

<li><a class="div2" href="#"><h2>Div 2</h2></a></li>
<div class="biocontent ">
<div class="div2">
<p>Content 2</p>
</div>
</div>

<li><a class="div3" href="#"><h2>Div 3</h2></a></li>
<div class="biocontent ">
<div class="div3">
<p>Content 3</p>
</div>
</div>

<li><a class="div4" href="#"><h2>Div 4</h2></a></li>
<div class="biocontent ">
<div class="div4">
<p>Content 4</p>
</div>
</div>

 <li><a class="div5" href="#"><h2>Div 5</h2></a></li>
<div class="biocontent>
<div class="div5">
Content 5
</div>
</div>
</body>
</html>

Upvotes: 0

Views: 444

Answers (2)

user2004812
user2004812

Reputation:

This is the solution:

<html>
<head>
<title>Jquery Change content of Div</title>
<style>
.servicescontent div{
    display:none;
}
</style>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript" language="javascript"> 
jQuery(document).ready(function(){
        var $j = jQuery;    

//services page
$j('.services li a').click(function(){
    var  showid= $j(this).attr('class');
    $j('.servicescontent div').hide();
   $('#'+showid).toggle('fast');
});
});
</script>
</head>
<body>
<ul class="services">
<li><a class="div1" href="#"><h2>Div 1</h2></a></li>
<div class="servicescontent">
<div id="div1" class="cont">
<p>Content1</p>
</div>
</div>

<li><a class="div2" href="#"><h2>Div 2</h2></a></li>
<div class="servicescontent">
<div id="div2"  class="cont">
<p>Content 2</p>
</div>
</div>

<li><a class="div3" href="#"><h2>Div 3</h2></a></li>
<div class="servicescontent">
<div id="div3"  class="cont">
<p>Content 3</p>
</div>
</div>

<li><a class="div4" href="#"><h2>Div 4</h2></a></li>
<div class="servicescontent">
<div id="div4"  class="cont">
<p>Content 4</p>
</div>
</div>

 <li><a class="div5" href="#"><h2>Div 5</h2></a></li>
<div class="servicescontent">
<div id="div5"  class="cont">
Content 5
</div>
</div>
</body>
</html>

Upvotes: 2

Jay Blanchard
Jay Blanchard

Reputation: 34426

Your HTML was messed up, so I removed an extra div.servicescontent and rewrote the function to toggle the content - http://jsfiddle.net/CCa7K/2/

$('a').click(function() {
    $(this).parent().next('.servicescontent').toggle();
});

Upvotes: 1

Related Questions