show hide issue

**ianhaney** · 01-21-2016, 09:42 PM

Hi

I have a show hide feature working using javascript but can't work out that if I click on one link and the content shows and then click another link to show another bit of content, I would like the first lot of content to hide so it only shows one lot of content at one time, below is my script

Code:

<script>
$(document).ready(function(){
    $("#hideae").click(function(){
        $("p#ae").hide();
    });
    $("#showae").click(function(){
        $("p#ae").show();
    });
	
	$("#hidefj").click(function(){
        $("p#fj").hide();
    });
    $("#showfj").click(function(){
        $("p#fj").show();
    });
	
	$("#hideko").click(function(){
        $("p#ko").hide();
    });
    $("#showko").click(function(){
        $("p#ko").show();
    });
	
	$("#hidept").click(function(){
        $("p#pt").hide();
    });
    $("#showpt").click(function(){
        $("p#pt").show();
    });
	
	$("#hideuz").click(function(){
        $("p#uz").hide();
    });
    $("#showuz").click(function(){
        $("p#uz").show();
    });
});
</script>

echo '<div style="color: #000000;">';
echo '<a id="hideae" class="xlink">Hide A-E</a>';
echo '&nbsp; - &nbsp;';
echo '<a id="showae" class="xlink">Show A-E</a>';
echo '</div>';

while($row= mysqli_fetch_assoc($query)){

//echo '<div class="newboxes" id="newboxes1"><label><input class="checkbox" type="checkbox" value="'.$row['customer_phone'].'" name="customer_phone[]" id="customer_phone"/> '.$row['customer_name'].'&nbsp;-&nbsp;'.$row['customer_phone'].'</label></div>';

echo '<p id="ae"><label><input class="checkbox" type="checkbox" value="'.$row['customer_phone'].'" name="customer_phone[]" id="customer_phone"/> '.$row['customer_name'].'&nbsp;-&nbsp;'.$row['customer_phone'].'</label></p>';

}

echo '<br>';

echo '<div style="clear: both;">';

$sqlCommand2 = "SELECT id, customer_name, customer_phone FROM repairs WHERE customer_phone LIKE '%44%' AND customer_name BETWEEN 'f' AND 'jz' GROUP BY customer_name";

$query = mysqli_query($db, $sqlCommand2);

echo '<div style="color: #000000;">';
echo '<a id="hidefj" class="xlink">Hide F-J</a>';
echo '&nbsp; - &nbsp;';
echo '<a id="showfj" class="xlink">Show F-J</a>';
echo '</div>';

while($row= mysqli_fetch_assoc($query)){
	
echo '<p id="fj"><label><input class="checkbox" type="checkbox" value="'.$row['customer_phone'].'" name="customer_phone[]" id="customer_phone"/> '.$row['customer_name'].'&nbsp;-&nbsp;'.$row['customer_phone'].'</label></p>';

}

echo '</div>';

echo '<br>';

echo '<div style="clear: both;">';

$sqlCommand3 = "SELECT id, customer_name, customer_phone FROM repairs WHERE customer_phone LIKE '%44%' AND customer_name BETWEEN 'k' AND 'oz' GROUP BY customer_name";

$query = mysqli_query($db, $sqlCommand3);

echo '<div style="color: #000000;">';
echo '<a id="hideko" class="xlink">Hide K-O</a>';
echo '&nbsp; - &nbsp;';
echo '<a id="showko" class="xlink">Show K-O</a>';
echo '</div>';

while($row= mysqli_fetch_assoc($query)){
	
echo '<p id="ko"><label><input class="checkbox" type="checkbox" value="'.$row['customer_phone'].'" name="customer_phone[]" id="customer_phone"/> '.$row['customer_name'].'&nbsp;-&nbsp;'.$row['customer_phone'].'</label></p>';

}

echo '</div>';

echo '<br>';

echo '<div style="clear: both;">';

$sqlCommand4 = "SELECT id, customer_name, customer_phone FROM repairs WHERE customer_phone LIKE '%44%' AND customer_name BETWEEN 'p' AND 'tz' GROUP BY customer_name";

$query = mysqli_query($db, $sqlCommand4);

echo '<div style="color: #000000;">';
echo '<a id="hidept" class="xlink">Hide P-T</a>';
echo '&nbsp; - &nbsp;';
echo '<a id="showpt" class="xlink">Show P-T</a>';
echo '</div>';

while($row= mysqli_fetch_assoc($query)){
	
echo '<p id="pt"><label><input class="checkbox" type="checkbox" value="'.$row['customer_phone'].'" name="customer_phone[]" id="customer_phone"/> '.$row['customer_name'].'&nbsp;-&nbsp;'.$row['customer_phone'].'</label></p>';

}

echo '</div>';

echo '<br>';

echo '<div style="clear: both;">';

$sqlCommand5 = "SELECT id, customer_name, customer_phone FROM repairs WHERE customer_phone LIKE '%44%' AND customer_name BETWEEN 'u' AND 'zz' GROUP BY customer_name";

$query = mysqli_query($db, $sqlCommand5);

echo '<div style="color: #000000;">';
echo '<a id="hideuz" class="xlink">Hide U-Z</a>';
echo '&nbsp; - &nbsp;';
echo '<a id="showuz" class="xlink">Show U-Z</a>';
echo '</div>';

while($row= mysqli_fetch_assoc($query)){
	
echo '<p id="uz"><label><input class="checkbox" type="checkbox" value="'.$row['customer_phone'].'" name="customer_phone[]" id="customer_phone"/> '.$row['customer_name'].'&nbsp;-&nbsp;'.$row['customer_phone'].'</label></p>';

}

echo '</div>';

Thank you in advance

Ian

**styxlawyer** · 01-22-2016, 02:32 PM

It's a bit clumsy, but you have no way of knowing which content is currently displayed so you need to hide all of the other content.

Code:

<script>
$(document).ready(function(){
    $("#hideae").click(function(){
        $("p#ae").hide();
    });
    $("#showae").click(function(){
        $("p#ae").show();
        $("p#fj").hide();
        $("p#ko").hide();
        $("p#pt").hide();
        $("p#uz").hide();
    });
	
	$("#hidefj").click(function(){
        $("p#fj").hide();
    });
    $("#showfj").click(function(){
        $("p#fj").show();
        $("p#ae").hide();
        $("p#ko").hide();
        $("p#pt").hide();
        $("p#uz").hide();
    });
	
	$("#hideko").click(function(){
        $("p#ko").hide();
    });
    $("#showko").click(function(){
        $("p#ko").show();
        $("p#ae").hide();
        $("p#fj").hide();
        $("p#pt").hide();
        $("p#uz").hide();
    });
	
	$("#hidept").click(function(){
        $("p#pt").hide();
    });
    $("#showpt").click(function(){
        $("p#pt").show();
        $("p#ae").hide();
        $("p#fj").hide();
        $("p#ko").hide();
        $("p#uz").hide();
    });
	
	$("#hideuz").click(function(){
        $("p#uz").hide();
    });
    $("#showuz").click(function(){
        $("p#uz").show();
        $("p#ae").hide();
        $("p#fj").hide();
        $("p#ko").hide();
        $("p#pt").hide();
    });
});
</script>

If you created an array of content names and kept a pointer to the currently displayed content you would only need to hide that content.

**ianhaney** · 01-22-2016, 02:44 PM

Thank you so much, that is perfect

I have another issue that I can't seem to work out why it is doing it

If I select a customer checkbox in say the F-J group and I click show any of the other groups, it checks the first name in the group A-E so it keeps sending them a sms message as well, is it possible to check the coding and see what can be causing the issue of when I click another show link that it checks the checkbox for the first name in the Show A-E group, I can't work out why it is doing it

**styxlawyer** · 01-22-2016, 04:20 PM

Without seeing your page I have no idea what you mean.

Here's an improved version of my previous code:

Code:

<script>
function clearCurrentContent() {
  $("p#ae").hide();
  $("p#fj").hide();
  $("p#ko").hide();
  $("p#pt").hide();
  $("p#uz").hide();
}
 
$(document).ready(function(){
    $("#hideae").click(function(){
        $("p#ae").hide();
    });
    $("#showae").click(function(){
        clearCurrentContent();
        $("p#ae").show();
    });
	
	$("#hidefj").click(function(){
        clearCurrentContent();
        $("p#fj").hide();
    });
    $("#showfj").click(function(){
        clearCurrentContent();
        $("p#fj").show();
    });
	
	$("#hideko").click(function(){
        $("p#ko").hide();
   });
    $("#showko").click(function(){
        clearCurrentContent();
        $("p#ko").show();
    });
	
	$("#hidept").click(function(){
        $("p#pt").hide();
    });
    $("#showpt").click(function(){
        clearCurrentContent();
        $("p#pt").show();
    });
	
	$("#hideuz").click(function(){
        $("p#uz").hide();
    });
    $("#showuz").click(function(){
        clearCurrentContent();
        $("p#uz").show();
    });
});
</script>

**ianhaney** · 01-22-2016, 04:47 PM

Thank you the above code works perfect

ahh ok the page is on our admin side but I can send a screenshot of the issue if it helps

**ianhaney** · 01-22-2016, 04:53 PM

I have attached a screenshot of the issue, what is happening is if I click on show A-E it checks the checkbox for Bernie and then if I click Show F-J link it unchecks the checkbox for Bernie, it only happens for the first name though, it don't happen to any of the other checkboxes

so cause of the issue it sends a sms to Bernie as well as the actual person I only want to send the sms to, I thought it would be cause of a tag not closed but all the a tags and div tags etc are closed

Click image for larger version.

Name: checkbox-issue.jpg
Views: 95
Size: 59.3 KB
ID: 5800

**styxlawyer** · 01-22-2016, 05:07 PM

I suspect that SMS problem is more to do with the fact that the jQuery ".hide" method only hides the appropriate section (similar to CSS "display:none;"). You should either add a callback function to the ".hide" call or add some code to the "clearCurrentContent()" function to clear all the checkboxes after hiding the section.

See here for more info:

http://www.w3schools.com/jquery/eff_hide.asp

**ianhaney** · 01-22-2016, 06:43 PM

I'm not sure if clearCurrentContent() would work cause don't want to clear the checkboxes after hiding a section as that will uncheck any boxes I check myself that I want to send a sms to, I just need a way so that the very first checkbox is not checked every time I click show on any of the other groups

**ianhaney** · 01-22-2016, 06:46 PM

Sorry has gone over my head

**ianhaney** · 01-22-2016, 07:05 PM

I really don't get it, I wonder if it is a php issue that for some reason is sending the sms to the very first checkbox as well and not a javascript issue but am not sure, I am just taking a guess