Skip to main content
kineticcreative123
kineticcreative123
Inspiring
October 30, 2018
Answered

Need button icon/text to disappear when form is collapsed.

  • October 30, 2018
  • 1 reply
  • 986 views

Hi Everyone,

I'm working on a form and would like to replace the pencil icon with text that says "download our white paper". I can take out the font awesome class and add text in the bar but need it to disappear when expanded.

I started two versions below. One has the original pencil icon and the other has icon removed and replaced with copy. I'm not sure which would be easiest to revise to get what I need. Most importantly I need the text when collapsed to disappear when expanded.

http://offers.premierinc.com/formtest_formtest.html

http://offers.premierinc.com/formtest2_formtest2.html

Thanks for any help!

    This topic has been closed for replies.
    Correct answer osgood_

    If I understand you correctly - let's work on your formtest2.html file

    In your expandableform.js file

    Add - $('.download').hide(); - as shown in bold below:

    //Opening the form

    function bindFormClick(){

      $(formContainer).on('click', function(e) {

    $('.download').hide();

        e.preventDefault();

        toggleForm();

        //Ensure container doesn't togleForm when open

        $(this).off();

      });

    }

    Add -

    setTimeout(function(){

    $('.download').show(); },

    1000);

    - as shown in bold below:

    //Closing the form

    $('#form-close, .form-overlay').click(function(e) {

      e.stopPropagation();

      e.preventDefault();

      toggleForm();

      bindFormClick();

    setTimeout(function(){

    $('.download').show(); },

    1000);

    });

    In your html file add class="download" to the p tag:

    <p class="download" style="font-size: 22px;line-height: 1;font-family: Roboto, sans-serif;">Download the white paper</p>

    Remove the submit input from the form as its redundant:

    <input class="input submit" type="submit" value="Download the white paper">

    1 reply

    O
    osgood_Correct answer
    Legend
    October 30, 2018

    If I understand you correctly - let's work on your formtest2.html file

    In your expandableform.js file

    Add - $('.download').hide(); - as shown in bold below:

    //Opening the form

    function bindFormClick(){

      $(formContainer).on('click', function(e) {

    $('.download').hide();

        e.preventDefault();

        toggleForm();

        //Ensure container doesn't togleForm when open

        $(this).off();

      });

    }

    Add -

    setTimeout(function(){

    $('.download').show(); },

    1000);

    - as shown in bold below:

    //Closing the form

    $('#form-close, .form-overlay').click(function(e) {

      e.stopPropagation();

      e.preventDefault();

      toggleForm();

      bindFormClick();

    setTimeout(function(){

    $('.download').show(); },

    1000);

    });

    In your html file add class="download" to the p tag:

    <p class="download" style="font-size: 22px;line-height: 1;font-family: Roboto, sans-serif;">Download the white paper</p>

    Remove the submit input from the form as its redundant:

    <input class="input submit" type="submit" value="Download the white paper">

    kineticcreative123
    kineticcreative123Author
    Inspiring
    October 30, 2018

    Nice!!!! Thanks osgood! As far as learning more .js, what would be a good "go to" site to learn more of these functions?

    Thanks again man!!

    O
    osgood_
    Legend
    October 30, 2018

    kineticcreative123  wrote

    Nice!!!! Thanks osgood! As far as learning more .js, what would be a good "go to" site to learn more of these functions?

    Thanks again man!!

    For learning some of the basic jquery functions the w3schools site will be helpful:

    jQuery Tutorial

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices