document.getElementById('').style.display='block'; not working in Wordpress

Question

I have a function which toggles the content on click.

jQuery("#about_temp").click(function($){
    document.getElementById('con_temp').style.display='block';
    document.getElementById('keyc_temp').style.display='none';
    document.getElementById('benec_temp').style.display='none';
});

Is there any syntax error in this code? It doesn't hide the "con_temp" content. But if I run the same in normal HTML (I mean not in Wordpress), it is working fine.

Answer 1

You can use following script

jQuery("#about_temp").click(function($){
    jQuery('#con_temp').show();
    jQuery('#keyc_temp, #benec_temp').hide();
});

Answer 2

I think your mistake in the code is-- jQuery("#about_temp").click(function($){...}); -- try changing it to-- $("#about_temp").click(function() {...})

$("#about_temp").click(function() {
    document.getElementById('con_temp').style.display='block';
    document.getElementById('keyc_temp').style.display='none';
    document.getElementById('benec_temp').style.display='none';
});

If you are using Jquery it is easier to use the Jquery methods ( hide and show ) than Javascript.

Try this ---

$("#about_temp").click(function() {
    $('#con_temp').show();
    $('#keyc_temp, #benec_temp').hide();
});

Giving a parameter to hide and show like hide("slow") or show("slow") will give animation effect to the contents.

Answer 3

You can try :

jQuery(function(){
     jQuery("#about_temp").click(function(){
        jQuery("#con_temp").show();             //  jQuery("#con_temp").css("display","block");
        jQuery("#keyc_temp").hide();            //  jQuery("#keyc_temp").css("display","none");
        jQuery("#benec_temp").hide();           //  jQuery("#benec_temp").css("display","none");
    })
})

OR Try with on if your page html is generating on the fly or after any event take place

jQuery(function(){
    jQuery("body").on("click","#about_temp",function(){
        jQuery("#con_temp").show();              //  jQuery("#con_temp").css("display","block");
        jQuery("#keyc_temp").hide();            //  jQuery("#keyc_temp").css("display","none");
        jQuery("#benec_temp").hide();            //  jQuery("#benec_temp").css("display","none");
    })
})