BullGuard Antivirus Sale - 60% Off with openElement !
Forum Home Forum Home >

openElement

> openElement General Discussion
  New Posts New Posts RSS Feed - simple show/hide button
  FAQ FAQ  Forum Search   Register Register  Login Login

simple show/hide button

 Post Reply Post Reply
Author
Message
SWWS View Drop Down
Newbie
Newbie


Joined: Jun 08 2018
Location: UK
Status: Offline
Points: 15
Post Options Post Options   Thanks (0) Thanks(0)   Quote SWWS Quote  Post ReplyReply Direct Link To This Post Topic: simple show/hide button
    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
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group


Joined: May 31 2012
Status: Offline
Points: 5283
Post Options Post Options   Thanks (0) Thanks(0)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: Jun 08 2018 at 1:04pm
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
Back to Top
SWWS View Drop Down
Newbie
Newbie


Joined: Jun 08 2018
Location: UK
Status: Offline
Points: 15
Post Options Post Options   Thanks (0) Thanks(0)   Quote SWWS Quote  Post ReplyReply Direct Link To This Post Posted: Jun 09 2018 at 8:40pm
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
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group


Joined: May 31 2012
Status: Offline
Points: 5283
Post Options Post Options   Thanks (0) Thanks(0)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: Jun 11 2018 at 8:55am
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.
Back to Top
SWWS View Drop Down
Newbie
Newbie


Joined: Jun 08 2018
Location: UK
Status: Offline
Points: 15
Post Options Post Options   Thanks (0) Thanks(0)   Quote SWWS Quote  Post ReplyReply Direct Link To This Post Posted: Jun 11 2018 at 10:56am
Perfect! Thank you so much.
Back to Top
SWWS View Drop Down
Newbie
Newbie


Joined: Jun 08 2018
Location: UK
Status: Offline
Points: 15
Post Options Post Options   Thanks (0) Thanks(0)   Quote SWWS Quote  Post ReplyReply Direct Link To This Post Posted: Jun 22 2018 at 11:45am
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.


Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group


Joined: May 31 2012
Status: Offline
Points: 5283
Post Options Post Options   Thanks (0) Thanks(0)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: Jun 22 2018 at 11:53am
I think the line
if ($target.hasClass('shown')) { // currently visible

should have its condition inversed:

if (!$target.hasClass('shown')) { // currently visible
Back to Top
SWWS View Drop Down
Newbie
Newbie


Joined: Jun 08 2018
Location: UK
Status: Offline
Points: 15
Post Options Post Options   Thanks (0) Thanks(0)   Quote SWWS Quote  Post ReplyReply Direct Link To This Post Posted: Jun 23 2018 at 10:07am
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  
Back to Top
 Post Reply Post Reply
  Share Topic   

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

This page was generated in 0.066 seconds.