Question

I want to add toggle attribute to mysite. When I click hide/show button, it should show/hide divs. According to alphabetical order, a user who click a letter will show the content which starts with that letter. So my code is here :

<script>
$(document).ready(function() {
    $('#button_letter_A').click(function() {
        $('#portfolio_item_A').toggle();

    });
     $('#button_letter_B').click(function() {
        $('#portfolio_item_B').toggle();
    });
});
</script>

Instead of writing all letters in an order; how to write this code in a quick way. For example; can I make it with for loops in javascript?

Answer 1

// target everything with IDs that start with 'button_letter'
$("[id^='button_letter']").click(function () {

    // split the letter out of the ID
    // of the clicked element and use it to target
    // the correct div
    $("#portfolio_item_" + this.id.split("_")[2]).toggle();
});

Reference:

• http://api.jquery.com/attribute-starts-with-selector/
• https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/split