I have a Bootstrap radio buttons for showing/hiding parts of the content, and it works perfectly on Chrome, but doesnt work on Firefox nor Safari (iPhone, iPad...). It shows all content by default - even though 4 of 5 rows should be hidden onload.
Also, I'm getting these two errors on Firefox (they do not show up on Chrome):
TypeError: t is undefined[Learn More]
bootstrap.min.js:6:2080
ReferenceError: jQuery is not defined[Learn More]
togglebuttons.js:115:1
It is a WordPress site with one of the most popular paid themes on the market, so I'm guessing there shouldn't be any problems with jQuery, but it seems there is. What could be the cause?
When I tried to load jQuery manually just before I load the script from the snippet below, page wouldn't even load, because I was getting some jQuery conflicts.
Here's the code:
(function($) {
var $first_visible = 1;
var $second_visible = 0;
var $third_visible = 0;
var $fourth_visible = 0;
var $fifth_visible = 0;
// hide all except the first one implicitly
$( document ).ready(function() {
$('#row2').hide('1');
$('#row3').hide('1');
$('#row4').hide('1');
$('#row5').hide('1');
});
$("input[name=options]").change(function () {
if(this.value == "1") {
if($second_visible) {
$('#row2').fadeOut('200', function() { $('#row1').fadeIn('200'); });
$second_visible = 0;
}
else if($third_visible) {
$('#row3').fadeOut('200', function() { $('#row1').fadeIn('200'); });
$third_visible = 0;
}
else if($fourth_visible) {
$('#row4').fadeOut('200', function() { $('#row1').fadeIn('200'); });
$fourth_visible = 0;
}
else if($fifth_visible) {
$('#row5').fadeOut('200', function() { $('#row1').fadeIn('200'); });
$fifth_visible = 0;
}
$first_visible = 1;
}
else if(this.value == "2") {
if($first_visible) {
$('#row1').fadeOut('200', function() { $('#row2').fadeIn('200'); });
$first_visible = 0;
}
else if($third_visible) {
$('#row3').fadeOut('200', function() { $('#row2').fadeIn('200'); });
$third_visible = 0;
}
else if($fourth_visible) {
$('#row4').fadeOut('200', function() { $('#row2').fadeIn('200'); });
$fourth_visible = 0;
}
else if($fifth_visible) {
$('#row5').fadeOut('200', function() { $('#row2').fadeIn('200'); });
$fifth_visible = 0;
}
$second_visible = 1;
}
else if(this.value == "3") {
if($first_visible) {
$('#row1').fadeOut('200', function() { $('#row3').fadeIn('200'); });
$first_visible = 0;
}
else if($second_visible) {
$('#row2').fadeOut('200', function() { $('#row3').fadeIn('200'); });
$second_visible = 0;
}
else if($fourth_visible) {
$('#row4').fadeOut('200', function() { $('#row3').fadeIn('200'); });
$fourth_visible = 0;
}
else if($fifth_visible) {
$('#row5').fadeOut('200', function() { $('#row3').fadeIn('200'); });
$fifth_visible = 0;
}
$third_visible = 1;
}
else if(this.value == "4") {
if($first_visible) {
$('#row1').fadeOut('200', function() { $('#row4').fadeIn('200'); });
$first_visible = 0;
}
else if($second_visible) {
$('#row2').fadeOut('200', function() { $('#row4').fadeIn('200'); });
$second_visible = 0;
}
else if($third_visible) {
$('#row3').fadeOut('200', function() { $('#row4').fadeIn('200'); });
$third_visible = 0;
}
else if($fifth_visible) {
$('#row5').fadeOut('200', function() { $('#row4').fadeIn('200'); });
$fifth_visible = 0;
}
$fourth_visible = 1;
}
else if(this.value == "5") {
if($first_visible) {
$('#row1').fadeOut('200', function() { $('#row5').fadeIn('200'); });
$first_visible = 0;
}
else if($second_visible) {
$('#row2').fadeOut('200', function() { $('#row5').fadeIn('200'); });
$second_visible = 0;
}
else if($third_visible) {
$('#row3').fadeOut('200', function() { $('#row5').fadeIn('200'); });
$third_visible = 0;
}
else if($fourth_visible) {
$('#row4').fadeOut('200', function() { $('#row5').fadeIn('200'); });
$fourth_visible = 0;
}
$fifth_visible = 1;
}
});
})(jQuery);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- TOGGLE BUTTONS -->
<div class="row togglebuttons-row">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success btn-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" value="1" checked><span class="radio-span">Show 1</span>
</label>
<label class="btn btn-success btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off" value="2"><span class="radio-span">Show 2</span>
</label>
<label class="btn btn-success btn-primary">
<input type="radio" name="options" id="option3" autocomplete="off" value="3"><span class="radio-span">Show 3</span>
</label>
<label class="btn btn-success btn-primary">
<input type="radio" name="options" id="option4" autocomplete="off" value="4"><span class="radio-span">Show 4</span>
</label>
<label class="btn btn-success btn-primary">
<input type="radio" name="options" id="option5" autocomplete="off" value="5"><span class="radio-span">Show 5</span>
</label>
</div><!-- btn-group -->
</div><!-- row -->
<!-- *************************************
********** GENEROVANIE KONTAKTOV ********* -->
<div class="row row-eq-height contact-list" id="row1">
hello 1
</div><!-- row1 -->
<div class="row row-eq-height contact-list" id="row2">
hello 2
</div><!-- row2 -->
<div class="row row-eq-height contact-list" id="row3">
hello 3
</div><!-- row3 -->
<div class="row row-eq-height contact-list" id="row4">
hello 4
</div><!-- row4 -->
<div class="row row-eq-height contact-list" id="row5">
hello 5
</div><!-- row5 -->I believe I finally figured it out. The problem was that jQuery was loading on Chrome (somehow), but was not loading on Firefox nor Apple devices.
I was loading my script at the end of the file the traditional way, using <script> tags inside .php body. When I used the proper way for WordPress, it finally seem to work. I used this code in my theme's functions.php file:
wp_enqueue_script('my-custom-script', get_template_directory_uri() .'/js/myscript.js', array('jquery'), null, true);