This is old version

```
<html><head>
<script type="text/javascript">
function showhide(id){
if (document.getElementById){
obj = document.getElementById(id);
if (obj.style.display == "none"){
obj.style.display = "";
} else {
obj.style.display = "none";
}
}
}
</script>
</head>
<body>
<span onclick="showhide('1'); return(false);">show/hide 1</span>
<span onclick="showhide('2'); return(false);">show/hide 2</span>
<div id="1" style="border-style: solid; border-width: 0px; padding-left: 0px; padding-right: 0px; padding-top: 5px; padding-bottom: 0px; display: none;">
somthing here 1
</div>

<div id="2" style="border-style: solid; border-width: 0px; padding-left: 0px; padding-right: 0px; padding-top: 5px; padding-bottom: 0px; display: none;">
somthing here 2
</div>
</body>
</html>

```

But now i wanna do this with jquery, here is example <http://jsfiddle.net/AE75v/> or code

```
<html><head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $("#1").click(function() {
        if($("#1_1").is(":visible")) {
            $(this).find('span').html('&#x25B2;');
        } else {
            $(this).find('span').html('&#x25BC;');
        }
        $("#1_1").slideToggle();
    });
});
</script>
</head>
<body>
<a id="1">Show 1 <span>&#x25B2;</span></a>
<div id="1_1" style="border-style: solid; border-width: 0px; padding-left: 0px; padding-right: 0px; padding-top: 5px; padding-bottom: 0px; display: none;">Some text 1 here</div>

<p>

<a id="2">Show 2 <span>&#x25B2;</span></a>
<div id="2_1" style="border-style: solid; border-width: 0px; padding-left: 0px; padding-right: 0px; padding-top: 5px; padding-bottom: 0px; display: none;">Some text 2 here</div>
</body>
</html>

```

how to do it work with **onclick**, if onclick="**ID**" the same ID in `<div id="ID">` SHOW/HIDE...

all of this because i don't wanna all the time change the jquery code by addidng #ID and #ID\_1