• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 485
  • Last Modified:

Javascript Show/Hide tweak

I have a simple javascript "show/hide" snippet I am using to show more content.

Use clicks "see more" and content drops down. He clicks "hide" and the content slides back up and away.

Problem is I would like to hide the "See more" once its clicked and show it again when "hide" is clicked.

Here is the Javascript:

<script type="text/javascript">
 
$(document).ready(function(){
 
        $(".slidingDiv").hide();
        $(".show_hide").show();
 
    $('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();
    });
 
});
 
</script>

Open in new window


And here is the Div that is being shown/hidden:

<div class="slidingDiv">Content of showhide div</div>

Open in new window


and here are the two, identical show and hide links which obviously have the same basic affect:

<a href="#" class="show_hide">(see more)</a>

<a href="#" class="show_hide">(hide)</a>

Open in new window


Any thoughts on modifying this to hide the See More would be great
0
mcpilot1
Asked:
mcpilot1
  • 2
1 Solution
 
GaryCommented:
http://jsfiddle.net/GaryC123/TEhte/

<a href="#" class="show_hide">(see more)</a>
<div class="slidingDiv">Content of showhide div</div> 

Open in new window

$(document).ready(function(){
    $(".slidingDiv").hide();
    $('.show_hide').click(function(){
        varText=($(this).text()=="(see more)")?"(hide)":"(see more)"
        $(".slidingDiv").slideToggle();
        $(this).text(varText)
    });
});

Open in new window

0
 
mcpilot1Author Commented:
Gary,

INterestingly, while it's working on your code site, it's not working on the actual site. I have replaced the script in the header, basically overwriting the original version that I posted and it's not working. The "See More" is not appearing at all, despite being vieeable in the source code.

It should be a jquery conflict because the original code worked, and this is but a minor variation of that. I have attached the entire source code as an attachment since this is a shopify file and it's nearly impossible to view the dev site.

Thanks
shopify.txt
0
 
GaryCommented:
You have this in your css - stylesheet.css line 513

.show_hide {
    display: none;
}
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now