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
Solution 1:
Something like this? Just save it as a .html file for an example.
<html><head><scriptsrc="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><divclass="area"><divclass="symbol">+</div><ahref='#'>here is a test link</a><divclass="description">Here is a test description</div></div><divclass="area"><divclass="symbol">+</div><ahref='#'>here is a test link</a><divclass="description">Here is a test description</div></div><divclass="area"><divclass="symbol">+</div><ahref='#'>here is a test link</a><divclass="description">Here is a test description</div></div></body></html>Solution 2:
As Dimitre mentioned, I'm not sure what xslt has to do with this, but here's the jquery:
<styletype="text/css">.description { display: none; }
</style><divclass="title"id="fruits">Fruits <spanclass="expand">+</span></div><divclass="description"id="fruits_desc">
Fruits are nutritious.
</div><scripttype="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])
Post a Comment for "Div Tag To Show On Expand And Hide On Collapse Usi Ng Xslt"