0

I have a button that toggles the playlistHolder div. In addition, when '.albumImage a' is selected, it also unhides the playlist. I am trying to change the text of the button to 'Show Playlist' if the playlist is hidden and 'Hide Playlist' if it is not hidden. I have tried click functions with if(('.playlist').is(:hidden)) but have not had any luck with getting it to work. I am new to Jquery so I understand that my code below can use much improvement, here is my setup now that works when the album image is selected as well as when the toggle button is selected without changing the text:

HTML

<div class="togglePlaylist">
    <button id="togglePlaylistBT">Show/Hide Playlist</button>
    <!-- POPUP LAUNCHER -->
</div>
<div class="playlistHolder">
    <div class="componentPlaylist">
        <div class="playlist_inner">
            <!-- playlist items are appended here! -->
        </div>
    </div>
    <!-- preloader -->
    <div class="preloader"></div>
</div>
<div class="albumWrapper">
    <div class="albumCovers">
        <div class="albumImage">    <a href='#componentWrapper' onClick="api_loadPlaylist(hap_players[0],{hidden: false, id: '#playlist3'}); return false;"><img class="img-responsive" src="media/music/Album_Covers/Swag_Brothers.jpg" alt="thumb" /></a>

            <p class="nowPlaying">Now Playing</p>
        </div>
    </div>
</div>

Javascript/JQuery

$('#togglePlaylistBT, .albumImage a').on('click', function() {
                var $this = $('#togglePlaylistBT');
                if($('.playlistHolder').is(':visible')) 
                {
                    $('.playlistHolder').hide('slow');
                    $this.text('Hide Playlist');
                }
                else
                {
                    $('.playlistHolder').show('slow');
                    $this.text('Show Playlist');
                }
            });
2
  • but have not had any luck with getting it to work. What do you mean? Do you get any error at all?
    – D4V1D
    Mar 25, 2015 at 16:33
  • Why can't you change the text at the same time as you hide/show the playlist? Mar 25, 2015 at 16:33

2 Answers 2

1

Try this snippet of code:

    $('.togglePlaylist button').on('click', function() {
        var $this = $(this);
        if($('.playlistHolder').is(':visible')) 
        {
            $('.playlistHolder').hide();
            $this.text('Hide Playlist');
        }
        else
        {
            $('.playlistHolder').show();
            $this.text('Show Playlist');
        }
    });

Working JSFiddle

0
0

When you hide and show the playlist just run document.getElementById("togglePlaylistBT").value="Show Playlist";

For example:

function change() 
{
    var elem = document.getElementById("playlistButton");
    if (elem.value=="Open Playlist") { elem.value = "Close Playlist"; closeBox(); }
    else { elem.value = "Open Playlist"; openBox(); }
}

function openBox() {
    alert("open");
}

function closeBox() {
    alert("closed");
}
<input onclick="change()" type="button" value="Open Playlist" id="playlistButton"></input>
Make sure to change openBox() and closeBox() functions to your box code!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.