Solved

Javascript Show/Hide tweak

Posted on 2014-03-25
3
478 Views
Last Modified: 2014-03-28
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
Comment
Question by:mcpilot1
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39953771
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
 

Author Comment

by:mcpilot1
ID: 39961442
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
 
LVL 58

Expert Comment

by:Gary
ID: 39961805
You have this in your css - stylesheet.css line 513

.show_hide {
    display: none;
}
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article discusses four methods for overlaying images in a container on a web page
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

740 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question