Closing a "show/hide" div with a close icon

I am interested in adding a small red "x" in the upper right corner of each of the FAQ boxes to allow users to close the question.

You can see the dev site here: onestretch-faq and the javascript in question should be visable as well.

Any thoughts?
mcpilot1Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Alexandre SimõesManager / Technology SpecialistCommented:
Something like this should work:
Inside each h4 add:
<img src="url to the close image" alt="close" class="close" />

Open in new window

CSS
.morep {
position:relative;
}
.morep img.close {
position:absolute;
right:0;
top:0;
}

Open in new window


javascript
     $('.morep img.close').on('click', function(){  
          $(this).closest('h4').remove();
     })

Open in new window

0
Alexandre SimõesManager / Technology SpecialistCommented:
The previous code will add the close button image far from the text.
If you want it right after the text just add the HTML after the the <a> and use the following css instead:
.morep img.close {
     vertical-align: middle;
}

Open in new window

0
Chris StanyonWebDevCommented:
Inside each of your faq boxes add the following:

<div class="closefaq">x</div>

Open in new window

Add the following CSS

.closefaq {position:absolute;top:0px; right:5px; color:red;cursor:pointer; }

Open in new window

and add position:relative to the CSS rule for .faq

Now add the following jQuery:

$('.closefaq').click(function() {
    $(this).parent('.faq').toggle();
})

Open in new window

Job done :)
0
Learn Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

mcpilot1Author Commented:
Chrisstanyon,

I implemented the solution on the first question, and you can see that the red "x" shows up outside the reply box and does not respond to the click. I added the jquery to the jquery document and all other steps.

Any thoughts?

Pat

https://onestretch.squarespace.com/faq/
0
Chris StanyonWebDevCommented:
To get the positioning right you need to add position:relative to the faq class rules:

.faq {
  background: none repeat scroll 0 0 #FFFFFF;
  border: 1px solid #CCCCCC;
  padding: 15px;
  position: relative;
}

Open in new window

Can't see anything in your page to show that you've added the jQuery code
0
mcpilot1Author Commented:
close. the red x is in place, the close is still not working. The jquery code is in the header. Have I scripted it incorrectly? I enclosed it in <script> tags.
0
Chris StanyonWebDevCommented:
Right. You've not included it in your document ready block. You've coded it separately from the rest. Your code needs to look like this:

<script type="text/javascript">
$(function() {
    $('a.morecontent').click(function(e){
        e.preventDefault();
        $($(this).attr('href')).toggle();
    });
    
    $('a.showall').click(function(e) {
        e.preventDefault();
        $('[id^=hidden]').show();
    });
    $('a.hideall').click(function(e) {
        e.preventDefault();
        $('[id^=hidden]').hide();
    });

  $('.closefaq').click(function() {
    $(this).parent('.faq').toggle();
});

});
</script>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mcpilot1Author Commented:
Thank you for being persistant and answering my ongoing questions. I appreciate it!!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Scripting Languages

From novice to tech pro — start learning today.