CODEWITHSUNDEEP
javascriptjqueryhtmlbutton
SteveMills04
SteveMills04

Reputation: 119

Change <button> text if element is :hidden or :visible

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');
                }
            });

Upvotes: 0

Views: 1351

Answers (2)

ConnorMcF
ConnorMcF

Reputation: 48

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!

Upvotes: 0

D4V1D
D4V1D

Reputation: 5849

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

Upvotes: 1

Related Questions