Javascript code not working inside wordpress page - javascript

I am trying to create a number of lists on a word press page. Each in its own div. For Example:
<strong>List One</strong>
<div>
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
<li>Item Five</li>
</ul>
</div>
<strong>List Two</strong>
<div>
<ul>
<li>Item Uno</li>
<li>Item Dos</li>
<li>Item Tre</li>
</ul>
</div>
I would like the list header text to be clickable
<strong>List One</strong>
and hide or show when clicked.
where, the default should be hidden
<div style="display: none";>
...
</div>
I can do this using javascript 9see below), however, it seems to conflict with wordpress /php/ template/plugins, etc.
Although my page has only text and the code (see below), it will not work 100%. it takes multiple clicks sometimes for it to work
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
<strong>List One</strong>
<div id="list_one" style="display: none">
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
<li>Item Five</li>
</ul>
</div>
<strong>List Two</strong>
<div id="list_two" style="display: none">
<ul>
<li>Item Uno</li>
<li>Item Dos</li>
<li>Item Tre</li>
</ul>
</div>
Question: Can this be done another way in order to get same affect. i.e. click a link andshow or hide DIV ?

Try adding your script via wp_footer hook. Just enter your javascript function inside the callback function.
function custom_js_functions(){
<script>
//your code goes here.
</script>
}
add_action('wp_footer', 'custom_js_functions');

Related

Revert list to previous order after prependTo using Jquery

I have a list which shows only four (featured) list items initially, and once a 'show more' button is clicked, it reveals the remainder of the list. I use$('.featured').prependTo('.feature-list'); to display the featured items first. However, when I click the 'show more' button, I want the list to be displayed in the original order before the prependTo happened. I can't seem to figure out how to do this.
$('.featured').prependTo('.feature-list');
$('.feature-list').find('li:gt(3)').hide();
$('.more-btn').click(function() {
$('.feature-list li:gt(3)').show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>List 1</p>
<ul class="feature-list feature-p-list1">
<li>Item 1</li>
<li class="featured">Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li class="featured">Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li class="featured">Item 8</li>
<li class="featured">Item 9</li>
<li>Item 10</li>
</ul>
<button class="more-btn">Show More</button>
Just try hide and show using :not() filter
https://api.jquery.com/not-selector/
$('.feature-list > li:not(.featured)').hide()
$('.more-btn').click(function() {
$('.feature-list > li:not(.featured)').show()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>List 1</p>
<ul class="feature-list feature-p-list1">
<li>Item 1</li>
<li class="featured"><b>Item 2</b></li>
<li>Item 3</li>
<li>Item 4</li>
<li class="featured">Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li class="featured">Item 8</li>
<li class="featured">Item 9</li>
<li>Item 10</li>
</ul>
<button class="more-btn">Show More</button>

jQuery targeting elements with index()

So I have two unordered lists, with the same amount of items in them. So let's assume items in unordered list #2 are all hidden. The only way to make them appear is if you click on the items in unordered list #1.
so basically
<ul class="list1">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
<ul class="list2">
<li class="hide">item 1</li>
<li class="hide">item 2</li>
<li class="hide">item 3</li>
<li class="hide">item 4</li>
</ul>
Now the way I'm trying to accomplish this is using the index() method, but I'm not sure how to properly approach this code.
This is how I thought of it.
$('.list1').on('click', 'li', function() {
$('.list2 li').index($(this).index()).toggleClass('active');
});
so when you click on an line item in .list1, whatever the index of that line item is, is the index I want to target in .list2
the problem I'm having is that when I console log it, I'm getting weird index numbers. The first line item would show up as 2 rather than 0, and the index for the 2nd line item would be -1.
what am I doing wrong? a lot I'm sure.
thanks in advance guys!
Jquery .index() return index of selected element. You need to use :eq() selector or .eq() method to selecting element with index.
$('.list1').on('click', 'li', function() {
$('.list2 li').eq($(this).index()).toggleClass('active');
});
.hide { display: none; }
.active { display: block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list1">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
<ul class="list2">
<li class="hide">item 1</li>
<li class="hide">item 2</li>
<li class="hide">item 3</li>
<li class="hide">item 4</li>
</ul>
try this, this will work for you fine
<html>
<head></head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">
/* in here we get the ul which the class name is list2 and get the li elements inside it and hide those first*/
ul.list2 li{
display: none;
}
</style>
<body>
<ul class="list1">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
<ul class="list2">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</body>
<script type="text/javascript">
$(document).ready(function(){
$("ul.list1 li").click(function(){
var theindex = $(this).index();//in here you get the index number of clicked li element inside list1 class
$("ul.list2 li").eq(theindex).slideToggle(500);//then in here, you show the same index li element in list2 , which we are hidden.
});
});
</script>
</html>

how to get onclick event of li with a div id

if the code snippet is like this:
<div id="test">
<div>
<h3>First section</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div>
<h3>Second section</h3>
<ul>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
</div>
I have the id "test" of the first div. how can i get the innerhtml of clicked items. like alert the answer "item 1" when <li>Item 1</li> is clicked. I already tried this following code
var ul = document.getElementById("test").getElementsByTagName('ul')[0];
ul.onclick = function(event) {
event = event || window.event;
var target = event.target || event.srcElement;
alert(target.getAttribute("href"));
};
This working good only for the first section ul. i need the same to happen for N uls. What will be the best method for this. Thanks in advance.
Note: In my project i can't use jquery. only javascript or YUI is supported
Iterate over each ul and add the click handler to it like
var uls = document.getElementById("test").getElementsByTagName('ul');
for (var i = 0; i < uls.length; i++) {
uls[i].addEventListener('click', clickHandler)
}
function clickHandler(event) {
event = event || window.event;
var target = event.target || event.srcElement;
alert(target.getAttribute("href"));
}
<div id="test">
<div>
<h3>First section</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div>
<h3>Second section</h3>
<ul>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
</div>
You can use Event Delegation to achieve the expected result.
Bind a single event handler to the parent, and get the child from event.target
//Get the object of the div#test
var testDiv = document.getElementById('test');
//Bind onclick event for the div#test object
testDiv.onclick = function(e) {
//Prevent the default href action (optional)
e.preventDefault();
//Check whether the target element is an Anchor tag
if (e.target.nodeName == 'A') {
alert(e.target.innerHTML);
}
}
<div id="test">
<div>
<h3>First section</h3>
<ul>
<li>Item 1
</li>
<li>Item 2
</li>
<li>Item 3
</li>
</ul>
</div>
<div>
<h3>Second section</h3>
<ul>
<li>Item 4
</li>
<li>Item 5
</li>
<li>Item 6
</li>
</ul>
</div>
</div>

SlickNav menu, each li with specific color background?

I prepare my mobile menu with SlickNav but I have a little problem. I can not specify my css attributes on my <li> beacause SlickNav not taken into account. The problem is that I simply want to change the background of each of my <li>
Any idea?
<ul id="menu2">
<li>Parent 1
<ul>
<li>item 3</li>
<li>Parent 3
<ul>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
</ul>
</li>
<li>item 4</li>
</ul>
</li>
<li>item 1</li>
<li>non-link item</li>
<li>Parent 2
<ul>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
</ul>
</li>
I think you can use CSS3 :nth-child() Selector, like this:
ul:nth-child(1) { // first li
background-color: #ff0000;
}
ul:nth-child(2) { // second li
background-color: #ffffff;
}

How to remove nested UL element but keep child elements

I wish to remove the <ul> tags for a nested list and then add its child <li> elements to the parent <ul> element. For example :
<ul>
<li>Item 1</li>
<ul>
<li>Item 2</li>
</ul>
<li>Item 3</li>
</ul>
Should become :
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
I am new to jQuery and what I have created so far is not working and I am not sure why:
$content.find('ul').each(function() {
if ($(this).parent().is('li')) {
var elements = $(this).children().detach();
var closest = $(this).closest('li');
$(this).remove();
elements.appendTo(closest);
}
}
Any help much appreciated.
use .unwrap()
DEMO or DEMO
$('ul > ul > li').unwrap('ul');
try
var elements = [];
$('ul.outer li').each(function(){
elements.push(this);
});
$('ul.outer').html('');
for(x in elements){
$('ul.outer').append($(elements[x])[0].outerHTML);
}
if you need it to work for .. multiple levels deep .. for example
<ul class="outer">
<li>Item 1</li>
<ul>
<li>Item 2</li>
<ul>
<li>Item 2</li>
</ul>
</ul>
<li>Item 3</li>
</ul>

Categories