Click links to hide/show content - javascript

I'm having a table listing some comments. Next to the comment there are two links, the hide and show. So what I want to do is when clicking the right link to change the comment's status with ajax.
// inside a loop for showing all comments
<div class="pull-right" class="publish-history-comment">
Publish
</div>
<div class="pull-right" class="hide-history-comment">
Hide
</div>
<?= $row->comment; ?>
<script type="text/javascript">
function toggleHistoryNotes(status) {
var link = $('.' + status + '-history-comment-link');
var time = link.attr('data-time');
alert(time);
}
</script>
How can I target which link was clicked and do the ajax call to toggle the comment status?

You can change your JQuery to trigged on click on a tag. Also, you should add e.preventDefault(); as this is gonna be click on the a tag, and this would prevent default action.
$('.pull-right a').on('click', function(e) {
e.preventDefault();
var time = $(this).data('time');
console.log($(this).text() + ' == ' + time);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pull-right" class="publish-history-comment">
Publish
</div>
<div class="pull-right" class="hide-history-comment">
Hide
</div>

<script type="text/javascript">
$('a').on('click', function(e) {
e.preventDefault();
var time = $(this).data('time');
});
</script>

Related

jQuery toggle show/hide default content

I have a show/hide toggle that switches between content if menu a is clicked.
Before the click function is triggered content is shown in the default div.
For some reason if you click one of the a tag's twice it successfully toggles the content on/off; however you are left with a blank screen
This is a poor user experience.
How can I avoid this and ensure that the default content is shown if a user selects a menu item twice?
$(document).ready(function() {
var $show = $('.show');
$('.menu a').on('click', function(e) {
e.preventDefault();
$show.not(this).stop().hide(450);
$($(this).attr('href')).stop().toggle(450);
$('.default').addClass('hidden');
});
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
Screen
Music
Art
Food
</div>
<div id="show-screen" class="show">show screen</div>
<div id="show-music" class="show">show music</div>
<div id="show-art" class="show">show art</div>
<div id="show-food" class="show">show food</div>
<div class="default">default content</div>
Thanks
Although I'd suggest a completely different approach to handle this problem, to make your code work, I'd do something like this.
https://jsfiddle.net/6cnt95ap/1/
$(document).ready(function() {
var $show = $('.show');
$('.menu a').on('click', function(e) {
e.preventDefault();
$show.not(this).stop().hide(450);
$($(this).attr('href')).stop().toggle(450);
$('.default').addClass('hidden');
window.setTimeout(()=>{
var showDefault = true, divs = $('.show');
divs.each(function(){
if($(this).css("display") !=='none'){
showDefault = false;
return false;
}
});
if(showDefault){
$('.default').removeClass('hidden');
}
}, 500)
});
})

First popup wont close when next popup is clicked

I am wanting the popups to only appear one at a time, no matter how many popups there are. So if one popup is currently open, it will close and the new one would remain open. I currently have them coded so the initial link will open and close the popup, and the user should be able to click anywhere in the document to close the popup after it has been opened.
I have a jsfiddle here.
Problems I'm having with this code:
1.The first popup clicked wont disappear if another is selected
2.You have to double click the link to make the popup reappear if you click anywhere besides the inital link to close it
3.All the popups should be initially closed
HTML:
<div id="link"> One</div>
<div class="popup popup_hide" id="one">Content</div>
<div id="link"> Two</div>
<div class="popup popup_hide" id="two">Content link</div>
<div id="link"> Three</div>
<div class="popup popup_hide" id="three">Content </div>
Javascript:
jQuery(document).ready(function() {
var popupStatus = 0;
if (popupStatus == 0) { // if value is 0, show popup
$('.showPopup').click(function () {
$('#' + $(this).attr('rel') + '_img').removeClass('border_grey');
if ($(this).hasClass("selected")) {
$('#' + $(this).attr('rel')).hide();
$(this).removeClass("selected");
} else {
$(this).addClass("selected");
$('#' + $(this).attr('rel') + '_img').addClass('border_grey');
$('#' + $(this).attr('rel')).show();
popupStatus = 1;
}
return false;
});
}
else if (popupStatus == 1){
$('.popup').hide();
popupStatus = 0;
}
$('.hide_popup').click(function () {
$('img').removeClass('border_grey');
$('.popup').hide();
return false;
});
$(document).click(function (e) {
if (e.target.class !== 'popup_hide') {
$('.popup_hide').hide();
}
});
}); // jQuery End
This might do what you are looking for:
jsFiddle Demo
var rr, popupStatus = 0;
$('.popup').hide();
$('.showPopup').click(function (e) {
rr = $(this).attr('rel');
$('.popup').hide();
$('#' + rr).show();
e.stopImmediatePropagation();
});
$(document).click(function (e) {
if (e.target.class !== 'popup_hide' && e.target.class !== 'showPopup') {
$('.popup_hide').hide();
}
});
first thing to mention is, that you should rework your html, because it is containing Id's with the same name, which should not be, because an element Id should be unique.
I'm not sure if this is what you are looking for but I updated your code a little, so this could be some starting point for you
HTML
<div id="link1">
hello
</div>
<div class="popup popup_hide" id="popup_brain">Content</div>
<div id="link2"> Goodbye
</div>
<div class="popup popup_hide" id="heart">Content hi</div>
JS
jQuery(document).ready(function(){
$('.popup_hide').hide()
$('#link1').click(function(){
$('#popup_brain').show()
$('#heart').hide()
})
$('#link2').click(function(){
$('#heart').show()
$('#popup_brain').hide()
})
})
Best

hide and show div click on a

i want to hide id
when i click on a href so its same id shows and other id will close automatically
example :
<div id="fit" class="heading">FIT</div>
first
<div id="er" style="display:none;">aksdjfhaskdj hskj hskjfh sd fghjgfdjf gdsjfdg jdfgjdf gjgdfjgfdjf gasdkjfasjfghsdj </div>
erp
<div id="erp" style="display:none;">erp </div>
<div id="style" class="heading">style</div>
and script:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(e) {
$("a").click(function(e) {
var ab = $(this).attr("href");
//alert(ab);
//$("div").hide();
$(ab).show();
});
});
</script>
in html use class for anchor related div
<div id="fit" class="heading">FIT</div>
first
<div id="er" style="display:none;" class="anchorrel">aksdjfhaskdj hskj hskjfh sd fghjgfdjf gdsjfdg jdfgjdf gjgdfjgfdjf gasdkjfasjfghsdj </div>
erp
<div id="erp" style="display:none;" class="anchorrel">erp </div>
<div id="style" class="heading">style</div>
<script>
$(document).ready(function(e) {
$("a").click(function(e) {
e.preventDefault();
var ab = $(this).attr("href");
//alert(ab);
$(".anchorrel").hide();// all div related to .anchorrel hide
$(ab).show();
});
});
</script>
see demo
You can do this:
$(document).ready(function (e) {
// Cache the anchor tag here
var $link = $('a');
// Click event handler for the link
$link.click(function (e) {
// prevent the default action of the anchor
e.preventDefault();
var id = this.href;
// Hide all the visible divs next to all the anchors
$link.next('div:visible').hide();
// Show the current div with id
$(id).show();
});
});
If you wan't to close all other div's and display only the div with the id that matches the href of the tag clicked than use the following:
$("a").click(function(e) {
var ab = $(this).attr("href");
$('div').hide();
$(ab).show();
});
I don't know why you comment it in the first place, maybe i don't understand what you wan't to acheive.
Here is a fiddle: http://jsfiddle.net/25RZR/
Fiddle
JavaScript
$(document).ready(function(e) {
$("a").click(function(e) {
var ab = $(this).attr("href");
$('.content').hide();
$(ab).show();
});
});
HTML
<div id="fit" class="heading">FIT</div>
first
<div id="er" class="content hide">aksdjfhaskdj hskj hskjfh sd fghjgfdjf gdsjfdg jdfgjdf gjgdfjgfdjf gasdkjfasjfghsdj </div>
erp
<div id="erp" class="content hide">erp </div>
<div id="style" class="heading">style</div>
Well you can do better this way:
$(document).ready(function(e) {
$("a").click(function (e) {
e.preventDefault; // <------------stop the default behavior
var ab = $(this).attr('href'); // <------better to use in terms of performance
$(ab).show().siblings('div:not(.heading)').hide();
});
});
Demo in action

Running script with onclick event when only inside a particular div element

I'm looking at running this script:
$(document).ready(function() {
$('a').click(function(e) {
var urlyep=(this)
e.preventDefault();
$("#content").load($(urlyep).attr('href'));
});
});
This loads content from a local HTML file via a menu hyperlink into the #content div. It works great but I want to make it more specific so it only works when the click is made in the #menubar div.
Err… You mean $('#menubar a').click(…) ?
<script type="text/javascript">
$(document).ready(function() {
$('#menubar a').click(function(e) {
var urlyep=(this)
e.preventDefault();
$("#content").load("yourexternalpage.html");
});
});
</script>
<div id="content" >new content will go here</div>
<div id="menubar" >menubar</div>
If you have more than one link on the menu bar, I am assuming you have, each needing to load it's own content/page you could do something like the following.
<script type="text/javascript">
$(document).ready(function() {
$('#menubar a').click(function(e) {
var urlyep=(this.name);
e.preventDefault();
$("#content").load(urlyep);
});
});
</script>
<div id="content" >new content will go here</div>
<div id="menubar" ><a href="#" name="page1.php" >menubar link1</a>-<a href="#" name="page2.php" >menubar link2</a></div>

Best approach to slideup and tabs with jQuery

I'm creating a page with an image at the top, and a menu below. When the user clicks on on of the 3 menu buttons, the image slideUp and the page scrolls down so the menu is at the top of the page, then the right .content div fades in. The slideUp should only happen the first time the user clicks on of the buttons.
What the absolute best way to do this with jQuery? (no plugins)
I also need to know how I can't prevent it to fade in the page that is already visible if i click the same button twice?
I'm using rel instead of href, since the href made the page jump, even with return false.
This is what I have so far:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
imgVisible = true;
$('#mainmenu a').click(function(){
var $activeTab = $(this).attr('rel');
if(!imgVisible){
$('html:not(:animated),body:not(:animated)').animate({scrollTop:$('#mainmenu').offset().top-20},500);
$('.content').hide();
$($activeTab).fadeIn();
} else{
$('#imgholder').slideUp(500,function(){
imgVisible = false;
$('#mainmenu a[rel="'+$activeTab+'"]').click();
});
}
return false;
});
});
</script>
<div id="imgholder"><img src="image.jpg" /></div>
<div id="mainmenu">
<ul>
<li><a rel="#tab1"></a></li>
<li><a rel="#tab2"></a></li>
<li><a rel="#tab3"></a></li>
</ul>
</div>
<div id="container">
<div class="content" id="tab1">
content
</div>
<div class="content" id="tab2">
content
</div>
<div class="content" id="tab3">
content
</div>
</div>
The following code accomplishes what you need:
$('#mainmenu a').click(function(){
var myrel=$(this).attr('rel');
$('.content:not([id='+myrel+'])').hide();
$('#imgholder').slideUp(500,function(){
$('#'+myrel).fadeIn();
});
});
....
<li><a href='#' rel='tab0'></a></li>
I have removed the '#' sign from your rel='' piece ;-)
I am not sure why you would want to scroll the page. When a user clicks on the menu, he/she already has it focused (so it is visible inside the current viewport). But do you have a very large top image? If that is the case, let me know and I will modify the snippet. (Still, it depends on the amount of content below the menu visible when the page first loads.)
Also, for SEO reasons you might want to use the href instead of the rel attribute and create separate content holding pages. The following snippet would remove the navigation action.
$('#mainmenu a').each(function(){
var myhref = $(this).attr('href');
$(this).attr('href','#').attr('rel',myhref);
}).click(function(){
var myrel=$(this).attr('rel');
$('.content:not([id='+myrel+'])').hide();
//....etc
I think this is a great example of what your looking for: Organic Tabs
var imgVisible = true;
var $activeTab, $lastTab;
var $mainmenu = $('#mainmenu');
var offset = $mainmenu.offset().top - 20;
$mainmenu.find('a').click(function() {
$activeTab = $($(this).attr('rel'));
if (!imgVisible) {
// dont fire any events if already open
if ($lastTab.attr('id') == $activeTab.attr('id')) return false;
$lastTab.fadeOut('normal', function() {
$activeTab.fadeIn(500, function() {
$lastTab = $activeTab;
});
});
} else {
$('#imgholder').slideUp(500, function() {
imgVisible = false;
window.scrollTo(0, offset);
$activeTab.fadeIn(500, function() {
$lastTab = $activeTab;
});
});
}
return false;
});
I highly suggest adding <a href="#"> as this will not make the page jump when done properly and will ensure validation on your anchor links. Someone let me know if I missed something, it can be resolved quickly (or you can do it for me if you have an optimization or improvement).

Categories