Highlighted

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

Contributor ,
Oct 30, 2018

Copy link to clipboard

Copied

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!

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">

Views

394

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Contributor ,
Oct 30, 2018

Copy link to clipboard

Copied

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!

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">

Views

395

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 30, 2018 0
LEGEND ,
Oct 30, 2018

Copy link to clipboard

Copied

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">

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 30, 2018 0
Contributor ,
Oct 30, 2018

Copy link to clipboard

Copied

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!!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 30, 2018 0
LEGEND ,
Oct 30, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 30, 2018 1
Contributor ,
Oct 30, 2018

Copy link to clipboard

Copied

Thank you.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 30, 2018 0
Adobe Community Professional ,
Oct 31, 2018

Copy link to clipboard

Copied

jquery itself has a branch too

https://learn.jquery.com/

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 31, 2018 1