$(document).ready(function () {

// choose text for the show/hide link - can contain HTML (e.g. an image)
    var showText = '<span class="btn btn-primary" >Add More</span>';
    var hideText = '<span class="btn btn-danger" >Close</span>';

// initialise the visibility check
    var is_visible = false;

// append show/hide links to the element directly preceding the element with a class of "toggle"
    $('.toggle').prev().append(' <a href="#" class="toggleLink">' + showText + '</a>');

// hide all of the elements with a class of 'toggle'
    $('.toggle').hide();

// capture clicks on the toggle links
    $('a.toggleLink').click(function () {

        console.log($(this).text());
        $(this).text() === "Add More"
            ? $(this).html(hideText)
            : $(this).html(showText)



// // switch visibility
//         is_visible = !is_visible;
//
//         console.log(is_visible);
//
// change the link depending on whether the element is shown or hidden
//         $(this).html( hideText ? showText : hideText);

// toggle the display - uncomment the next line for a basic "accordion" style

        $(this).parent().next('.toggle').toggle('slow');

// return false so any link destination is not followed
        return false;

    });
});