Solved

How can I repeat this sliding show / hide dynamic?

Posted on 2015-01-28
3
104 Views
Last Modified: 2015-01-29
This works:

<!doctype html>
<html lang="en">
<head>  
<meta charset="utf-8">  
<title>jQuery UI Effects - Hide Demo</title>  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
 $(document).ready(function(){
 
        $(".slidingDiv").hide();
        $(".show_hide").show();
 
    $('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();
    });
 
});
 </script>
 
 <style>
.slidingDiv {
    height:300px;
    background-color: #99CCFF;
    padding:20px;
    margin-top:10px;
    border-bottom:5px solid #3399FF;
}
 
.show_hide {
    display:none;
}

</style>
 
 </head>
 
 <body>
 
 <a href="#" class="show_hide">Show/hide</a>
<div class="slidingDiv">
Fill this space with really interesting content. <a href="#" class="show_hide">hide</a></div>
 </body>
 
 </html>

Open in new window


My dilemma is that I want to repeat this show / hide dynamic in the context of a situation where I'll be looping through a database and I want that show / hide to appear with every question.

I started to think that what I could conceivably do is repeat that code for every question, but that seemed to me like I was overlooking something more elegant where I could simply pass in an "id" of some sort so the same code would effect different divs based on that id.

Sounds reasonable, but how?
0
Comment
Question by:brucegust
  • 2
3 Comments
 
LVL 9

Accepted Solution

by:
WebDevEM earned 500 total points
ID: 40576599
Hi,

It actually doesn't take very much to convert what you have into a FAQ-style list where each link toggles the DIV below it... Just take a look at jQuery's "this" and "next" features.  I've set up a Fiddle at http://jsfiddle.net/webdevem/8yo24y1b/ to show it in action, but here it is as well:

HTML
<div class="show_hide"><a href="#">Show/hide</a></div>
<div class="slidingDiv">
Fill this space with really interesting content. <a href="#" class="show_hide">hide</a></div>
<div class="show_hide"><a href="#">Show/hide</a></div>
<div class="slidingDiv">
Fill this space with really interesting content. <a href="#" class="show_hide">hide</a></div>
<div class="show_hide"><a href="#">Show/hide</a></div>
<div class="slidingDiv">
Fill this space with really interesting content. <a href="#" class="show_hide">hide</a></div>

Open in new window

JavaScript
$(".slidingDiv").hide();
$(".show_hide").show();

$('.show_hide').click(function(){
    $(this).next().slideToggle();
});

Open in new window


CSS
.slidingDiv {
    height:300px;
    background-color: #99CCFF;
    padding:20px;
    margin-top:10px;
    border-bottom:5px solid #3399FF;
}
 
.show_hide {
    display:none;
}

Open in new window


What that does is set up a click event that will target the NEXT div based on which one was clicked, rather than targeting one in particular.

Hope this helps!

WebDevEM
0
 
LVL 9

Expert Comment

by:WebDevEM
ID: 40576603
I've added a slight adjustment to the Fiddle so that the "Hide" link inside the content will hide its parent (the blue box containing it) on click.
$('.hideMe').click(function(){
    $(this).parent().slideUp();
});

Open in new window

0
 

Author Closing Comment

by:brucegust
ID: 40578121
Thanks!
0

Featured Post

ScreenConnect 6.0 Free Trial

Explore all the enhancements in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
https://github.com/willowsystems/jSignature 11 52
JavaScript let vs var 5 27
Hide cell in a table 2 14
VBScript on Html 8 13
When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

821 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