div tag to show on expand and hide on collapse usi ng xslt
I have list of hyperlinks on a webpart and i would like to show a plus sign next to each link and when i click on it should expand and would like to show the description and when i click on the -ve sign it should collapse and descrip开发者_开发技巧tion should be hidden. How can i acheive this using xslt. Plz privide me some suggestions. Let me know if something is not clear.
Thanks
Something like this? Just save it as a .html file for an example.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".area").find('.symbol').click(function(){
if($(this).html() == '-')
{
$(this).html('+');
}else{
$(this).html('-');
};
$(this).siblings('.description').toggle();
});
});
</script>
<style>
.description
{
display:none;
}
.symbol
{
float:left;
cursor:hand;
cursor:pointer;
}
</style>
</head>
<body>
<div class="area">
<div class="symbol">+</div><a href='#'>here is a test link</a>
<div class="description">Here is a test description</div>
</div>
<div class="area">
<div class="symbol">+</div><a href='#'>here is a test link</a>
<div class="description">Here is a test description</div>
</div>
<div class="area">
<div class="symbol">+</div><a href='#'>here is a test link</a>
<div class="description">Here is a test description</div>
</div>
</body>
</html>
As Dimitre mentioned, I'm not sure what xslt has to do with this, but here's the jquery:
<style type="text/css">
.description { display: none; }
</style>
<div class="title" id="fruits">Fruits <span class="expand">+</span></div>
<div class="description" id="fruits_desc">
Fruits are nutritious.
</div>
<script type="text/javascript">
$('.title .expand').click(function() {
var expander = $(this);
var selectedID = $(this).parent().attr('id');
var desc_id = '#'+selectedID+'_desc';
$(desc_id).toggle(function() {
$(desc_id).show();
$(expander).html('-');
}, function() {
$(desc_id).hide();
$(expander).html('+');
}); // toggle
}); // click
</script>
xslt just transforms xml files I think? There's a jquery library for that (google 'jquery xslt') and you might replace the hide() and show() functionality here with .html('') and .html([ajax place to load data from which pulls from an xml file transformed by xslt])
加载中,请稍侯......
精彩评论