simple show/hide button |
Post Reply |
Author | |
SWWS
Newbie Joined: Jun 08 2018 Location: UK Status: Offline Points: 15 |
Post Options
Thanks(0)
Posted: Jun 08 2018 at 10:47am |
Hi, I have little coding experience but am trying to create a simple show/hide text system. I am working within the senswhite responsive template. I am using two multi-text elements above one another and employing the code below provided by Dmit OE to show/hide the second text box. This all works fine. My problem is that when I arrange text in two columns the positioning of the lower boxes seems to be lost on showing the hidden text. i.e they are side by side in oe but preview aligned left and stacked vertically. Is there a way around this or is there an all together neater solution I am missing? $(function(){ // wait page load $('.trigger').click(function(){ var $target = $('.target'); $target.toggleClass('shown'); if ($target.hasClass('shown')) { // currently visible $target.hide();// hide the target element } else { // currently invisible $target.css({ visibility: 'visible', display: 'block' }); // show the target element } }); });
Edited by SWWS - Jun 08 2018 at 10:54am |
|
Dmit OE
Admin Group Joined: May 31 2012 Status: Offline Points: 5283 |
Post Options
Thanks(0)
|
Hi, Without link it's hard to help. Try to review the positioning of the elements, either put them onto the same "line" (paragraph, even if it takes several visible lines) or, on the contrary, separate into lines
|
|
SWWS
Newbie Joined: Jun 08 2018 Location: UK Status: Offline Points: 15 |
Post Options
Thanks(0)
|
Hi Dmit, Thanks for the reply. I've uploaded my site so far. The text loads correctly, under About, but when you toggle more/less it refreshes incorrectly. Unless you spot something obvious I'll just work with one column of text for now which seems to work okay. Thanks for your support and of course for the software.
Edited by SWWS - Jun 11 2018 at 10:58am |
|
Dmit OE
Admin Group Joined: May 31 2012 Status: Offline Points: 5283 |
Post Options
Thanks(0)
|
I see. If you want the "more" text to stay in the same column, put both the "short" text and its "more" part into the same Group of Elements container element, I mean "group" them together by putting into the Group of Elements.
|
|
SWWS
Newbie Joined: Jun 08 2018 Location: UK Status: Offline Points: 15 |
Post Options
Thanks(0)
|
Perfect! Thank you so much.
|
|
SWWS
Newbie Joined: Jun 08 2018 Location: UK Status: Offline Points: 15 |
Post Options
Thanks(0)
|
Hi, So I explored using the code above but found that the first click on loading wasn't recognised. I have used instead two code blocks associated with the more and less buttons $(function(){ // wait page load $('.trigmore').click(function(){ var $target1 = $('.target1'); var $trigmore = $('.trigmore'); var $trigless = $('.trigless'); $target1.slideDown(1000); //shows more txt $trigmore.hide(); //hides more button $trigless.show(); //shows less button }); }); and $(function(){ // wait page load $('.trigless').click(function(){ var $target1 = $('.target1'); var $trigmore = $('.trigmore'); var $trigless = $('.trigless'); $target1.slideUp(1000); // hides extra txt $trigmore.show(); // shows more button $trigless.hide(); // hides less button }); }); This works for me but if anyone knows why the toggleclass code doesn't respond to the first click I would like to know for future usage. Examples shown here: http://storywarriors.x10host.com/ under ABOUT with my verbose code on the left column and the toggle code on the right. |
|
Dmit OE
Admin Group Joined: May 31 2012 Status: Offline Points: 5283 |
Post Options
Thanks(0)
|
I think the line if ($target.hasClass('shown')) { // currently visible should have its condition inversed: if (!$target.hasClass('shown')) { // currently visible
|
|
SWWS
Newbie Joined: Jun 08 2018 Location: UK Status: Offline Points: 15 |
Post Options
Thanks(0)
|
Great, thank you Dimit OE So I now have $(function(){ // wait page load $('.trigger').click(function(){ var $target = $('.target'); var $trigmore = $('.trigmore'); var $trigless = $('.trigless'); $target.toggleClass('shown'); if (!$target.hasClass('shown')) { // currently visible $target.slideUp(1000); // hides extra txt $trigmore.show(); // shows more button $trigless.hide(); // hides less button// hide the target element } else { // currently invisible $target.slideDown(1000); //shows extra txt $trigmore.hide();// hides more button $trigless.show();// shows less button } }); }); With the following custom classes added "target" added to the text to hide/show "trigger trigmore" added to a text link element (more) "trigger trigless" added to a text link element (less) I also added an anchor on the less button to return to the top of the text Thanks for the help Dimit. I hope this is of help to other noobs. If anyone knows of a neater solution let me know. Cheers
|
|
Post Reply | |
Tweet
|
Forum Jump | Forum Permissions You cannot post new topics in this forum You cannot reply to topics in this forum You cannot delete your posts in this forum You cannot edit your posts in this forum You cannot create polls in this forum You cannot vote in polls in this forum |