We Keep Coding

Open tooltipster by clicking prev or next, without needing to click on target specifically

Simply put, I have this navigation:
jsfiddle at the end.
<div class="country-list">
<div class="country-item active" data-country="pt">PT</div>
<div class="country-item" data-country="be">BE</div>
<div class="country-item" data-country="pl">PL</div>
<div class="country-item" data-country="ge">PT</div>
</div>
<ul class="next-prev">
<li class="prev">Prev</li>
<li class="next">Next</li>
</ul>
Each country-item has a an equal data to svg country id
<g id="pt" class="enabled"
<g id="be" class="enabled"
Then I have this function and a basic left right nav that uses it in the end to initiate tooltipster, but I dont know how to make it that it would automatically close and open when next is clicked? right now I still need to click to open it.
function showMapInfo() {
var dataCountry = $('.country-item.active').data('country');
//console.log(dataCountry);
var countryId;
$('.svg-container .enabled').each( function(){
countryId = $(this).attr("id");
//console.log(countryId);
if (dataCountry === countryId) {
$('.svg-container .enabled').removeClass('active');
$(this).addClass('active');
$('.svg-container .active').tooltipster({
interactive: true,
maxWidth: 300,
distance: 60,
animation: 'grow',
side: 'bottom',
trigger: 'click',
contentAsHTML: true,
content:$('#' + dataCountry).data("description")
});
}
});
}
showMapInfo();
$('.next-prev li').on('click', function () {
if ($(this).hasClass('next')){
if ($('.country-item.active').next().length == 0) {
$('.country-item.active').removeClass('active');
$('.country-item:first-child').addClass('active');
} else {
$('.country-item.active').next().addClass("active").prev().removeClass('active');
console.log($('.country-item.active').next());
}
showMapInfo();
} else {
if ($('.country-item.active').prev().length == 0) {
$('.country-item.active').removeClass('active');
$('.country-item:last-child').addClass('active');
} else {
$('.country-item.active').prev().addClass("active").next().removeClass('active');
console.log($('.country-item.active').prev());
}
showMapInfo();
}
});
How to close/open tooltip by clicking just next/prev without needing to click on it specifically? Then I could perhaps also have the first one opened if the nav has an active class also.
Clicking anywhere could just close it.
Jsfiddle: https://jsfiddle.net/rKaiser/kp16ohm8/46/

Figured it out
Codepen: https://codepen.io/rKaiser/pen/ZgXvzw had to add tooltipsterbundle in the js for some reason, adding the library didnt work.
$('...selector').tooltipster('show')
is correct.
$(document).ready(function() {
// START MAP FUNCTIONS
var countryId;
$('.svg-container .enabled').each(function () {
countryId = $(this).attr("id");
});
function initTooltipster() {
$('.svg-container .enabled').each(function () {
$(this).tooltipster({
interactive: true,
minIntersection: 64,
repositionOnScroll: false,
animation: 'fade',
trigger: 'custom',//disable hover
distance: 30,
theme: 'tooltipster-shadow',
trackOrigin: true, // on resize;
//trackTooltip: true,
side: 'bottom',
viewportAware: false,
//trigger: 'click',
contentAsHTML: true,
content: $(this).data("description")
});
});
}
initTooltipster();
function showMapInfo() {
var dataCountry = $('.country-item.active').data('country');
$('.svg-container .tooltipstered').each(function () {
var countryIdd = $(this).attr("id");
console.log(countryIdd);
if (dataCountry === countryIdd) {
//console.log(true);
$('.svg-container .tooltipstered').removeClass('active');
//console.log($(this));
$(this).addClass('active');
$('.tooltipstered').tooltipster('close');
$('.tooltipstered.active').tooltipster('show');
}
}); // each
}
showMapInfo();
$('.next-prev li').on('click', function () {
if ($(this).hasClass('next')) {
if ($('.country-item.active').next().length === 0) {
$('.country-item.active').removeClass('active');
$('.country-item:first-child').addClass('active');
} else {
$('.country-item.active').next().addClass("active").prev().removeClass('active');
//console.log($('.country-item.active').next());
}
showMapInfo();
} else {
if ($('.country-item.active').prev().length === 0) {
$('.country-item.active').removeClass('active');
$('.country-item:last-child').addClass('active');
} else {
$('.country-item.active').prev().addClass("active").next().removeClass('active');
//console.log($('.country-item.active').prev());
}
showMapInfo();
}
});
});

You just pass the selector and the 'open' argument to the tooltipster instance:
$('...selector').tooltipster('open')

click away to toggle a div

i'm making a wordpress theme with a slide out search box. I would like to hide/toggle the search box by clicking away. Here is my javascript
jQuery(document).ready(function($){
$("#flip").click(function(){
$("#searchbox").toggle("slide", { direction: "right" }, 500);
});
$("#flip2").click(function(){
$("#searchbox").toggle("slide", { direction: "right" }, 500);
});
});
jQuery('body').on('click', function(e){
{
$("#searchbox").toggle("slide", { direction: "right" }, 500);
});
jQuery('#searchbox').click(function(e)
{
e.stopPropagation();
});
I get an unexpected token error when trying this. Thanks for your help

this code should work-
jQuery(function() {
jQuery('#flip').click(function() {
jQuery("#searchbox").toggle("slide", { direction: "right" }, 500);
return false;
});
});
jQuery(document).click(function() {
jQuery("#searchbox").hide("slide", { direction: "right" }, 500);
});
jQuery("#searchbox").click(function(e) {
e.stopPropagation();
});
and here's a jsfiddle which I changed slightly for your purpose and for wordpress

You could do it with a window.onclick event:
(You didn't post any HTML code so this is just an example of using it)
var yourbox = document.getElementById('yourbox');
window.onclick = function(event) {
if (event.target == yourbox) yourbox.style.display = "none";
}

If this is the full code, the error is caused by the extra '{' character you have in this function:
jQuery('body').on('click', function(e){
{
$("#searchbox").toggle("slide", { direction: "right" }, 500);
});
You should remove the extra {
jQuery('body').on('click', function(e){
$("#searchbox").toggle("slide", { direction: "right" }, 500);
});
That said, this logic might not work for what you're trying to do, but this is probably the unexpected token error.

jQuery : how to prevent animation in related div?

is there any option to prevent slideUp() when hover its related div ?
$('#member1').hover(function () {
$("#memberdetails2").hide();
$("#memberdetails1").stop(true, true).slideDown();
}, function () {
$("#memberdetails1").stop(true, true).slideUp();
});
$('#memebr2').hover(function () {
$("#memberdetails1").hide();
$("#memberdetails2").stop(true, true).slideDown();
}, function () {
$("#memberdetails2").stop(true, true).slideUp();
});
DEMO http://jsfiddle.net/sweetmaanu/zDYyB/

Are you talking about something like this?
http://jsfiddle.net/zDYyB/2/
If you want the members detail to be always visible, remove
$('#company').on('mouseleave', function(e) {
$('.membersare').hide();
});

jQuery - Activating one toggle button disables the other

I'm having issues with two jQuery toggle buttons. They are used for mobile navigation buttons:
(function($) {
$(function() {
$('#mobile-nav-button').toggle(
function() {
$('#fullpage').animate({ left: 250 }, 'normal', function() {
$('#mobile-nav-button').html('Close');{
$('#social-nav-panel').hide();
}
});
},
function() {
$('#fullpage').animate({ left: 0 }, 'normal', function() {
$('#mobile-nav-button').html('Open');
});
}
);
$('#social-nav-button').toggle(
function() {
$('#fullpage').animate({ right: 250 }, 'normal', function() {
$('#social-nav-button').html('Close');
});
},
function() {
$('#fullpage').animate({ right: 0 }, 'normal', function() {
$('#social-nav-button').html('Open');
});
}
);
});
})(jQuery);
On their own they work fine. The first button #mobile-nav-button works perfectly each time. The second button #social-nav-button also works fine. However, if #mobile-nav-button is selected, then #social-nav-button will cease to work (this does not apply the other way round, as #mobule-nav-button will always work, even if #social-nav-button has been selected).
I've seen a lot of similar posts on stack overflow (though not the same problem), but my JS/jQuery knowledge is sadly nowhere near good enough to apply any fixes to my issue.
Any help would be massively appreciated!

You can check my example: Toggle Buttons show and hide
HTML:
<button type="button" id="mobile_bt">Mobile</button>
<button type="button" id="social_bt">Social</button>
JS using jQuery:
$('#mobile_bt').click(function() {
var help= $(this);
$('#social_bt').toggle('slow', function() {
help.hide();
$(this).show();
});
});
$('#social_bt').click(function() {
var help= $(this);
$('#mobile_bt').toggle('slow', function() {
help.hide();
$(this).show();
});
});

Delay a submenu

I have make a script. That open my submenu in the navigation. When you go mouse out of the submenu. The submenu must be closed with a delay of 300ms. But the delay is not working. How can i fix this? This is my script:
$('.nav-main .container li').hover(function() {
if ($(this).find('.submenu').length > 0) {
$(this).addClass("hover");
$(this).find('.submenu').show();
}
}, function() {
$(this).find('.submenu').delay(300).hide();
$(this).removeClass("hover");
});

I haven't tested the following code but it should work ...
$('.nav-main .container li').hover(function() {
if ($(this).find('.submenu').length > 0) {
$(this).addClass("hover");
$(this).find('.submenu').show();
}
}, function() {
var submenu = $(this).find('.submenu');
setTimeout(function() {
submenu.hide();
}, 300);
$(this).removeClass("hover");
});

You will need to create a setTimeout() method, also, you need to define an object to be used inside of your function $(this) will be null.
$('.nav-main .container li').hover(function() {
if ($(this).find('.submenu').length > 0) {
$(this).addClass("hover");
$(this).find('.submenu').show();
}
}, function() {
var object = $(this);
setTimeout(function()
{
$(object).find('.submenu').hide();
$(object).removeClass("hover");
}, 300);
});