htmlcssresizeparagraph

Resize paragraph on button click

Good day,

Need your help guys. Is there a way to make a button onclick resize the paragraph's width in stylesheet? Basically it looks like this now:

p { width: 400px; }

My goal is, that the button will change it's width to 100%, so the paragraph will take the size of the window.

Solution

  • I'd suggest making a css class that has the paragraph width to be 100%.

    Then use javascript (jquery, or plain) to add the css class to the element on button click.

    See this example

    fullWidthParagraph = function() {
  $('p').toggleClass('full-width');
 }

    the $('p') selects all paragraph elements in the page, the toggleClass function adds/removes the full-width class on the elements. You can use addClass instead if you don't want the button to switch back and forth between the 400px and fullwidths.