jQuery + A function that returns clicked element
<p>I've been stuck on this for a long time now, I am looking for a bit of guidance ... 
I want to turn the following, into something more dynamic. I want the 'selector' to change / be based on whichever element was clicked. </p>

<p>So this is kind of what I think needs to be done:</p>

<ol>
<li>figure out which element was clicked. (h1, p, ol)</li>
<li>with that element now in a variable, apply a similar function to the one i've created below.. </li>
</ol>

<p>Otherwise, I have to specify this same function for every element instance. (h1, h2, h3, p, ul, ol)</p>

<p>So far this is what I have: (which works, but evidently only for my h1 element)</p>

<pre><code>$("#content_body h1").click(function() {    
        $(this).hide(); //hide current element.
        $(this).next().show(); //display next element.

        var numofEl = $("#content_body h1").length;

        if ($(this).next().index() == numofEl) { //if we're at last element,
        $("h1:first-child").show(); //restart cycle.
        }
});
</code></pre>

<p>Any help is always very much appreciated.. Thanks in advance!</p>

<p>*<strong><em>Update</em>**</strong></p>

<p>Another way of putting this / describe what I'm trying to get at: </p>

<p>Say you have many different elements in a container. (eg > #content_body)</p>

<ul>
<li>for each different element type (h1, h2, p) - only display one at a time. (starting by default with first of each el.)</li>
<li>when you click the element, it cycles through that same element sibling. (h1 will hide current h1, and display next h1, when it reaches end / last h1, it restarts cycle)</li>
</ul>
