CODEWITHSUNDEEP
javascriptphpcsswordpress
New Basha
New Basha

Reputation: 3

Show content on button click then hide that button

I am using Wordpress and I have an Iframe game that I want to prevent this game from running until the button (play game) is clicked.

So I want to create a div area (something like a button) when it is clicked the game will display, and that div area disappear.

Here is the code that I use:

jQuery(document).ready(function(){
	$('.playbutton').on('click',function(e){e.preventDefault();
	var post_id = jQuery(this).data('id');
	if($('#playgame').attr("onClick")==undefined){
	$('#playgame').css("display","none");
	}
    $('#game').css("display","block");
    jQuery.ajax({
	url:'my_site/wp-admin/admin-ajax.php',
	type:'post',
	data:{action:'display_game',post_id:post_id},
	success:function(response){
	$("#game").html(response);
	}});});});
#playgame {
    height: 200px;
    margin: 0px;
    }
    .playbutton {
    height: 200px;
    cursor: pointer;
    background-color: #353535;
    }
    p.playnowtext {
    font-size: 55px;
    display: inline-block;
    color: #ffc402;
    text-decoration: underline;
    }
    #bashabasha {
    padding: 70px 0;
    text-align: center;
    display: none;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="playgame"> 
    <div class="playbutton" data-id="<? echo get_the_ID(); ?>">
    <p class="playnowtext">Play Game</p></div> </div>
    <div id="game">
    <!--?php echo get_game( $post->ID );?-->
    </div>

Unfortunately, there something wrong, as the div area appear with the css but when I click on play game, nothing happen. The div area still there and didn't disappear nor the game starts to run.

I know that there is something wrong on the Javascript code, but I don't know it.

Your help will be much appreciated.

Upvotes: 0

Views: 174

Answers (2)

Towkir
Towkir

Reputation: 4014

Okay, from your description I tried to implement it without the API response, I used dummy text here ( you can use your response here ).

By default the div or the button whatever you want will remain shown, and the game area will be hidden by css, once you get the response from the API call, you put the contents in that #game element and show it with .show() method.

Check if the code snippet makes sense to you.

$(document).ready(function(){
    $('.playbutton').on('click', function(e) {
        e.preventDefault();
        var post_id = $(this).data('id');

        if (typeof ($('#playgame').attr("onClick")) === 'undefined') {
            $('#playgame').css("display", "none");
            console.log('no id found')
        }
        $('#game').css("display", "block");
        $.ajax({
            url: 'my_site/wp-admin/admin-ajax.php',
            type: 'post',
            data: {
                action: 'display_game', post_id: post_id
            },
            success: function (response) {
                $("#game").html(response).show(); // add .show() to show the '#game' element;
            }
        });
    });
});
#playgame {
  height: 200px;
  margin: 0;
}
.playbutton {
  height: 200px;
  cursor: pointer;
  background-color: #353535;
}
p.playnowtext {
  font-size: 55px;
  display: inline-block;
  color: #ffc402;
  text-decoration: underline;
}
#bashabasha {
  padding: 70px 0;
  text-align: center;
  display: none;
}

#game {
  display: none; /* as this is hidden by default and will be shown by javascript */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="playgame">
    <div class="playbutton" data-id="<? echo get_the_ID(); ?>">
        <p class="playnowtext">Play Game</p>
    </div> 
</div>
<div id="game">
    <!--?php echo get_game( $post->ID );?-->
    <!-- let's assume we get our expected contents here through the API request and the bellow content is that  -->
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <!-- And these are hidden by default -->
    <?php 
    if ( function_exists( 'get_game' ) ){
      echo get_game( $post->ID ); 
    }
    ?>     
</div>

Upvotes: 1

eclipsis
eclipsis

Reputation: 1550

$('#playgame').click(function() {
  $('#playgame, #game').toggle();
});

And CSS:

#game {
  display: none;
}

Upvotes: 0

Related Questions