спасибо разобрался со всем сам, вот пример
<section id="profileBlock" class="profileBlock margin-block">
<nav id="ico">
<p class="ui-state-default ui-corner-all"><span id="hide-8" class="ui-icon ui-icon-circle-triangle-n" title="Свернуть"></span></p>
</nav>
<header id="blockTop" class="blockTopRadius hide-8">блок1</header>
<section class="hideBlock hide-8">
<section id="blockBottom" class="blockBottomRadius">низ</section>
блок1
</section>
</section>
<section id="profileBlock" class="profileBlock margin-block">
<nav id="ico">
<p class="ui-state-default ui-corner-all"><span id="hide-9" class="ui-icon ui-icon-circle-triangle-n" title="Свернуть"></span></p>
</nav>
<header id="blockTop" class="blockTopRadius hide-9">блок2</header>
<section class="hideBlock hide-9">
<section id="blockBottom" class="blockBottomRadius">низ</section>
блок2
</section>
</section>
$('#ico p span').toggle(
function(){
var idElem = '.'+ $(this).attr('id');
$('.hideBlock'+idElem).slideUp('slow');
$('.blockTopRadius'+idElem).addClass('showBlock');
$('#'+$(this).attr('id')).attr({
'class':'ui-icon ui-icon-circle-triangle-s',
'title':'Развернуть'
});
},
function(){
var idElem = '.'+ $(this).attr('id');
$('.hideBlock'+idElem).slideDown('slow');
$('.blockTopRadius'+idElem).removeClass('showBlock');
$('#'+$(this).attr('id')).attr({
'class':'ui-icon ui-icon-circle-triangle-n',
'title':'Свернуть'
});
});
});
всё работает идеально единственный минус, это что на кнопку нужно вешать унекальный id и на блок который сворачивается и которому даётся стиль нужно писать класс такой же как id, оцените как независимый експерт норм написано или можно лутше?))