Question

I have webpages with several (and more is coming) types of data, each represented by a bar and a pie Google chart image:

<h3>Data_1</h3>
<p class="chart" align="center">
<img class="primary" src="pie_1.png">
<img class="secondary" src="bar_1.png">
</p>

<h3>Data_2</h3>
<p class="chart" align="center">
<img class="primary" src="pie_2.png">
<img class="secondary" src="bar_2.png">
</p>

....

Initially I’d like to display pie-charts and hide bar-charts.

When user clicks a pie-chart, I’d like to toggle it to bar-chart with a slide effect.

I think, I have a good idea how to do it with jQuery – using individual ids like #pie_1, #bar_1, #pie_2, #bar_2, …

But I wonder, if a more general approach is possible here?

Answer 1

You can use the .next() and the .prev() jQuery methods, like this:

bars.click(function () {
    $(this).slideUp().next().slideDown();
});
pies.click(function () {
    $(this).slideUp().prev().slideDown();
});