如何使用jQuery toggle（）和隐藏切换链接或按钮？

Question

I am using PHP sessions to to provide specific forms on a page and need to toggle between a "show form" link and the form. I have this working using jQuery toggle(), but I cannot figure out how to prevent the "show form" link from displaying in both toggle states.

I have experimented with jQuery hide() after toggle(), but this made everything disappear, and I have tried using CSS visibility: hidden (which also just caused everything, including the PHP content, to disappear).

<div id="togLink">
<?php echo $JQclick; ?>
</div>

<div id="showForm">
<?php require_once $_SERVER["DOCUMENT_ROOT"] . '/formInc.php'; ?>
</div>

<script>
function toggleForm() {
  $("#showForm").toggle();
  $("#togLink").toggle();
}

$("#togLink").click(function() {
  toggleForm();
});

$("#showForm").click(function() {
  toggleForm();
});
</script>

The above code works, but the PHP output is displayed in both toggle states (which, I know, is the expected behaviour). As I said above, I need some way of making the toggle state "either or" - clickable link or form, not both. Can anyone offer any suggestions for this?

... ...

CSS code:

@font-face {
    font-family: 'blair_capsregular';
    src: url('../.typefaces/blair_caps-webfont.woff2') format('woff2'),
         url('../typefaces/blair_caps-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

#ExBox {
    width: 600px;
    margin: 50px auto 0 auto;
    text-align: justify;
    font-family: verdana, arial, sans-serif;
    font-size: 11px;
    line-height: 1.6;
}

.titleBar {
    width:100%;
}

.Tbox {
    float:left; height:25px;
    text-align: center;
    font-size: 15px;
    font-family: 'blair_capsregular';
}

#box {
    border: 2px solid blue;
    margin: 0;
    position: static;
    padding: 0 2px 0 2px;
    text-decoration: none;
}

#box a:link {
    color: orange;
    text-decoration: none;
}

#box a:visited {
    color: orange;
    text-decoration: none;
}

.Tbox:nth-child(1) {
    width:33.3%;
}

.Tbox:nth-child(2) {
    width:33.3%;
}

.Tbox:nth-child(3) {
    width:33.3%;
}

.clearRed {
    clear: both;
    color: red;
}

.Tbox a:link {
    color: black;
    text-decoration: none;
}

.Tbox a:visited {
    color: black;
    text-decoration: none;
}

.Tbox a:hover {
    color: red;
    text-decoration: none;
}

.Tbox a:active {
    color: hotpink;
    text-decoration: none;
}

.Tbox a:focus {
    color: hotpink;
    text-decoration: none;
}





/* FORM CSS - Placeholder colors */
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #9b9b9b;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #9b9b9b;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #9b9b9b;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #9b9b9b;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #9b9b9b;
}

textarea::placeholder { color: #9b9b9b; font-family: arial; }

/* Colors for focused fields */

input[type=text], input[type=email], textarea {
  outline: none;
  border: 1px solid #9b9b9b;
}

input[type=text]:focus, input[type=email]:focus, textarea:focus {
  border: 1px solid #00C5BE;
}

/* Input styling */

textarea {
   font-family: arial;
   width: 27rem;
   font-size: 1rem;
   padding: 0.6rem;
   margin-right: 0.5rem;
   margin-left: 0.5rem;
   border-radius: 5px;
   border: 1px solid #9b9b9b;
   color: #9b9b9b !important;
}

.contact-form-div input {
   display: block;
   font-size: 1rem;
   width: 27rem;
   padding: 0.6rem;
   margin: 0.5rem;
   border-radius: 5px;
   border: 1px solid #9b9b9b;
   color: #9b9b9b !important;
}

.contact-form-div input[type=submit] {
   width: auto;
   background-color: #00C5BE;
   border: none;
   color: #fff !important;
   font-size: 1em;
   padding: 10px 50px;
   text-transform: uppercase;
   font-weight: normal;
}

/* Hide the fake field */
#m66 {
   display: none;
}


/* VERTICAL SLIDER */


* { margin:0; padding:0; }
a { text-decoration: none; }  

.expand {
  background: #fff;
  overflow: hidden;
  color: #000;   
  line-height: 50px;

  transition: all .5s ease-in-out;
  height: 0;
 }

 .expand:target {
  height: 50px;
}

.close {
    max-height: 0;
}

/* JQUERY TESTING */

.box{
    display:none;
}

#showForm {
  display: none;
}

... ...

Thanks to Grant Noe this is almost working. With the above code everything works perfectly ...except that clicking on the form causes it to disappear. Grant has since revised the code (again, thanks); but the revised code, whilst addressing the problem of the disappearing form, has a visible " contact form " link in both toggle states and loads the form first, not the link. The latter should be simple to fix; but I cannot figure out how to show either the contact form link or the form, not both in both toggle states.

The code, when using Grant's revised code, is as follows:

<div id="togLink">
<?php echo $JQclick; ?>
</div>

<div id="showForm">
<?php require_once $_SERVER["DOCUMENT_ROOT"] . '/form.php'; ?>
</div>

<script>
$("#togLink").click(function() {
  $("#showForm").toggle();
  $("#contactForm").toggle();
});
</script>


@font-face {
    font-family: 'blair_capsregular';
    src: url('../.typefaces/blair_caps-webfont.woff2') format('woff2'),
         url('../typefaces/blair_caps-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

#ExBox {
    width: 600px;
    margin: 50px auto 0 auto;
    text-align: justify;
    font-family: verdana, arial, sans-serif;
    font-size: 11px;
    line-height: 1.6;
}

.titleBar {
    width:100%;
}

.Tbox {
    float:left; height:25px;
    text-align: center;
    font-size: 15px;
    font-family: 'blair_capsregular';
}

#box {
    border: 2px solid blue;
    margin: 0;
    position: static;
    padding: 0 2px 0 2px;
    text-decoration: none;
}

#box a:link {
    color: orange;
    text-decoration: none;
}

#box a:visited {
    color: orange;
    text-decoration: none;
}

.Tbox:nth-child(1) {
    width:33.3%;
}

.Tbox:nth-child(2) {
    width:33.3%;
}

.Tbox:nth-child(3) {
    width:33.3%;
}

.clearRed {
    clear: both;
    color: red;
}

.Tbox a:link {
    color: black;
    text-decoration: none;
}

.Tbox a:visited {
    color: black;
    text-decoration: none;
}

.Tbox a:hover {
    color: red;
    text-decoration: none;
}

.Tbox a:active {
    color: hotpink;
    text-decoration: none;
}

.Tbox a:focus {
    color: hotpink;
    text-decoration: none;
}





/* FORM CSS - Placeholder colors */
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #9b9b9b;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #9b9b9b;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #9b9b9b;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #9b9b9b;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #9b9b9b;
}

textarea::placeholder { color: #9b9b9b; font-family: arial; }

/* Colors for focused fields */

input[type=text], input[type=email], textarea {
  outline: none;
  border: 1px solid #9b9b9b;
}

input[type=text]:focus, input[type=email]:focus, textarea:focus {
  border: 1px solid #00C5BE;
}

/* Input styling */

textarea {
   font-family: arial;
   width: 27rem;
   font-size: 1rem;
   padding: 0.6rem;
   margin-right: 0.5rem;
   margin-left: 0.5rem;
   border-radius: 5px;
   border: 1px solid #9b9b9b;
   color: #9b9b9b !important;
}

.contact-form-div input {
   display: block;
   font-size: 1rem;
   width: 27rem;
   padding: 0.6rem;
   margin: 0.5rem;
   border-radius: 5px;
   border: 1px solid #9b9b9b;
   color: #9b9b9b !important;
}

.contact-form-div input[type=submit] {
   width: auto;
   background-color: #00C5BE;
   border: none;
   color: #fff !important;
   font-size: 1em;
   padding: 10px 50px;
   text-transform: uppercase;
   font-weight: normal;
}

/* Hide the fake field */
#m66 {
   display: none;
}


/* VERTICAL SLIDER */


* { margin:0; padding:0; }
a { text-decoration: none; }  

.expand {
  background: #fff;
  overflow: hidden;
  color: #000;   
  line-height: 50px;

  transition: all .5s ease-in-out;
  height: 0;
 }

 .expand:target {
  height: 50px;
}

.close {
    max-height: 0;
}

/* JQUERY TESTING */

.box{
    display:none;
}

#togLink {
  color: blue;
  cursor: pointer;
}

#togLink:hover {
  text-decoration: underline;
}

#showForm,
#contactForm {
  width: 425px;
  height: 550px;
}

#showForm {
  background-color: #DDD;
}

#contactForm {
  background-color: #AAA;
  display: none;
}

I have not added-in contactForm to the HTML side of things, because it does not fix the persistent " contact form " link and leaves an ugly background-colour box behind even when hiding the form but failing to hide the link.

... ...

26 May 2019: with reference to a reply by rg88 [ How do I hide a part of a form and make it visible only on clicking a "Add another" button? ] this is what finally worked:

<a id="togLink" href="#"><?php echo $formClick; ?></a>
<div id="togForm"><?php require_once $_SERVER["DOCUMENT_ROOT"] . '/form.php'; ?>
</div>

<script>
$( "#togLink" ).on( "click", function() {
  $('#togForm').toggle();
});

</script>
#togForm {
  display: none;
}

There is still the issue of not being able to make the words " Contact Form " disappear when the form is loaded or being able to replace the words with something else, but it appears that it is not possible to make this happen because the Contact Form link (in this case) is the toggle point and therefore has to remain constant in all toggle states.

Answer 1

You're toggling just the one element right now, given this format: $(toggled-element).toggle(); . You'll need to toggle both elements like this:

$('#togLink').click(function(){
  $('#showForm').toggle();
  $('#contactForm').toggle();
});

If you initially want the link showing and the form hidden, you could hide the form with css with display: none; , or at the top of your html in a script with $('#showForm').hide(); . So the total result would be something like this:

 $("#togLink").click(function() { $("#showForm").toggle(); $("#contactForm").toggle(); }); 

 #togLink { color: blue; cursor: pointer; } #togLink:hover { text-decoration: underline; } #showForm, #contactForm { width: 425px; height: 550px; } #showForm { background-color: #DDD; } #contactForm { background-color: #AAA; display: none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="togLink">Toggle Form</div> <div id="showForm"></div> <div id="contactForm"></div> 

Let me know if I missed something.

Changelog:

I added the #contactForm div that's not seen in OP to adjust to OP use-case requests. The clarification occurred in the comments on my answer.

Answer 2

Placing the PHP in an HTML element allows you to have separate control over that element:

<div id="togLink">foo
<?php echo $JQclick; ?>
</div>

<div id="showForm">bar
<span>glorp<?php require_once $_SERVER["DOCUMENT_ROOT"] . '/formInc.php'; ?></span>
</div>

Use CSS to hide the element:

span {
  display: none;
}

Then avoid the element to be toggled, using .not() :

$('#togLink').click(function(){
  console.log('click');
  $('#showForm').not('span').toggle();
});

Here is a DEMO