Develop Reference

How can i do onclick event with html,css,js

I want the css codes of the blog1popup class to change when the image is clicked.
I know how to do this with hover, but i don't know how to make this action happen by clicking.
The element I want to use as this button;
<div class="row">
<div class="col-lg-4 col-md-6 sm-mb-35px">
<div class="blog-item">
<div class="img">
<img src="assets/img/blog-grid-1.jpg" alt=""></a>
<span class="day">14</span> <span class="month">April</span>
</div>
Fransa Geneline Islak Mendil İhracı
<p style="padding-left: 30px; padding-bottom: 20px; margin-top: -25px; line-height: 20px;">Tüm dünya ülkelerine yardımseverliği gösteren ülkemize..</p>
</div>
</div>
This is the element I want to have changes in the css codes.
<div class="blog1popup"></div>
Example on hover technique;
.blog-item:hover > .blog1popup{
opacity: 100%;
}

You can add click event on blog-item class, then you can add classes to any element or change any css property using jquery methods.
Eg.
$(".blog-item").on("click", function (e) {
$(".blog1popup").css("opacity", "100%");
$(".blog1popup").addClass("any-class");
});

How do add a class to another div, when hovering over one div?

I am trying to add class to .sectionmenu div, but for some reason it adds the class to both the div elements when I hover over the .tabone .toggleClass, the div has same the class.
When you hover our first div i.e .tabone .toggleClass it should add class to first div .sectionmenu, similarly when you hover our the second div i.e .tabone .toggleClass it should add class to second div .sectionmenu.
(function($) {
$(document).ready(function() {
$('.tabone .toggleClass').hover(function() {
var mine = $(this).closest('.menubox');
$(this).closest('.main-section').find('.sectionmenu').not(mine).removeClass('class_name');
mine.addClass('class_name');
});
});
}(jQuery));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-section">
<div id="col1">
<div class="hidden">hidden text</div>
</div>
<div id="col2" class="class">
<div class="menubox tabone"> --> when hover over this div it should add class to first .sectionmenu div
<a class="toggleClass">toggleClass</a>
<a class="toggleClass">toggleClass</a>
</div>
<div class="menubox tabone">
<a class="toggleClass">toggleClass</a>
<a class="toggleClass">toggleClass</a>
</div>
</div>
<div id="col3" class="class">
<div class="sectionmenu">
<div class="menubox">
<a class="toggleClass">toggleClass</a>
<a class="toggleClass">toggleClass</a>
</div>
</div>
<div class="sectionmenu">
<div class="menubox">
<a class="toggleClass">toggleClass</a>
<a class="toggleClass">toggleClass</a>
</div>
</div>
</div>
</div>

One approach is as follows, here we use jQuery to add a custom data-* attribute in order to relate the elements together:
// here we select elements with an 'id' attribute that starts with
// the string 'col',
// we then iterate over that collection of elements using the
// each() method:
$('[id^=col]').each(function() {
// caching variables to avoid - where possible - repeated look-ups
// for the same items;
// here we cache the current element:
let ancestor = $(this),
// we then cache the '.menubox' descendants of the
// current element:
menuboxes = ancestor.find('.menubox'),
// we then cache the '.toggleClass' elements:
toggleClassLinks = ancestor.find('.toggleClass');
// iterating over the menuboxes collection, and setting the
// custom 'data-*' attribute (here named 'data-index'),
// to contain the index of the current .menubox element
// within the collection, or its index within the current
// [id^=col] element:
menuboxes.attr('data-index', function(i) {
return i;
});
// if there are a non-zero number of '.toggleClass' elements:
if (toggleClassLinks.length) {
// we iterate over that collection and use the on() method
// to bind the anonymous function as an event-handler for
// the 'mouseenter' event:
toggleClassLinks.on('mouseenter', function(e) {
// caching the current .toggleClass element:
let target = $(this),
// caching the various elements:
grandparent = target.closest('.main-section'),
parent = target.closest('.menubox'),
// caching the attribute-value of the 'data-index'
// attribute we set earlier, using the data() method
// (because of a peculiarity of the method we couldn't
// set the attribute using that method, but retrieving
// is consistent):
index = parent.data('index');
// here we find the elements with the class of 'class_name' within the
// ancestor element, and remove that class:
grandparent.find('.class_name').removeClass('class_name');
// here we use a template-literal string to interpolate the 'index'
// variable into the string, to create an attribute-selector wherein
// the index is equal to the index of the currently hovered .toggleClass
// element's parent:
grandparent.find(`[data-index=${index}]`)
// we then filter out the current .toggleClass element's parent:
.not(parent)
// and add the class_name class to the other remaining element(s)
// that matched the original selector:
.addClass('class_name');
});
}
});
*,
::before,
::after {
box-sizing: border-box;
font: 1rem / 1.5 sans-serif;
font-weight: normal;
margin: 0;
padding: 0;
}
div {
border: 1px solid #000;
padding: 0.5em;
}
.main-section {
border-color: transparent;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1em;
min-height: 50vh;
}
.main-section>div {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.class_name,
.class_name .toggleClass {
color: #f90;
transition: color 0.3s ease-in-out;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-section">
<div id="col1">
<div class="hidden">hidden text</div>
</div>
<div id="col2" class="class">
<div class="menubox tabone">
toggleClass
</div>
<div class="menubox tabone">
toggleClass
</div>
</div>
<div id="col3" class="class">
<div class="sectionmenu">
<div class="menubox">
toggleClass
</div>
</div>
<div class="sectionmenu">
<div class="menubox">
toggleClass
</div>
</div>
</div>
</div>
JS Fiddle demo.
References:
addClass().
attr().
closest().
data().
find().
not().
on().
removeClass().

Javascript: Unable to hide entire html row (div tag)

I'm trying to hide an entire html row, which is a div tag, via javascript. However, I've been unable to do so, so far. The id I'm trying to hide on is the "row", which is located in the parent div. I'd like to hide everything contained within this div & all child div's (probably not using the right terminology)
Here's my html. As you'll see, the "row" value is contained within the parent div. "TherapistsName" is the name of the textarea:
var therapistsName = container.find(".TherapistsName");
var row = therapistsName.parents(".row").first();
row.hide();
And here's the html that I want to hide:
<div class="row mr-display-row row-eq-height work-task-question-container question-row" style="display: flex;" data-node-name="TherapistsName-7" data-persist="true">
<div class="col-4 mr-display-title">
<span class="displayValue">Therapists Name:</span>
</div>
<div class="col-8">
<div class="question-item" style="display: table-cell; word-break: break-word; overflow-wrap: break-word;">
<div class="input-text-length-container">
<textarea name="TherapistsName-7" class="main-input TherapistsName input-text-length auto-size" cols="85" data-allow-persist-answer="True" data-developer-name="TherapistsName" data-disable-on-hide="False" data-hidden="False" data-identifier="" data-node-name="TherapistsName-7" data-parent-branch-name="SpokeWithTherapist-Yes" data-previous-value="" data-question-group-name="" data-question-id="175" data-question-messages="[]" data-read-only="False" data-reset-answer-on-hide="True" data-tree-level="3" data-type="string" data-value-orig="" data-value-type="TextArea" id="TherapistsName-7" maxchars="1000" onchange="assignedWorkTasks.QuestionChange(this);;assignedWorkTasks.QuestionChangeComplete(this);" rows="1" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal; height: 26px;"></textarea><br>
<span class="chars-remaining" style="width:100%;float:left;margin:0 0 0 0;font-size:10px;">1000 characters remaining
</span>
</div>
</div>
</div>
</div>
Any idea why this would hide the entire div tag??
Thanks

Why not add a css class which contains display:none; and then add this class to the parent classlist using js?

row.hide(); You are saying hide this element. Its is doing what you asked. Hide the first parent element you find with the selector .row .
Since you are using jQuery there is a few answer's that can be used here.
Here is a quick example from jQuerys site =>
var spans = $( "span" );
$( "p" ).find( spans ).css( "color", "red" );
Don't forget you can use jQuerys dollar sign shorthand $("someElement") to quickly select the DOM element you want.
Doc reference: https://api.jquery.com/find/

You can use jQuery for this problem.
$("body").find(".TherapistsName").find(".row").first().hide();

First add the id as row then add
$('#row').addClass("displaynone");
by adding displaynone you can definitely hide
<div class="row mr-display-row row-eq-height work-task-question-container question-row" id='row' style="display: flex;" data-node-name="TherapistsName-7" data-persist="true">
<div class="col-4 mr-display-title">
<span class="displayValue">Therapists Name:</span>
</div>
<div class="col-8">
<div class="question-item" style="display: table-cell; word-break: break-word; overflow-wrap: break-word;">
<div class="input-text-length-container">
<textarea name="TherapistsName-7" class="main-input TherapistsName input-text-length auto-size" cols="85" data-allow-persist-answer="True" data-developer-name="TherapistsName" data-disable-on-hide="False" data-hidden="False" data-identifier="" data-node-name="TherapistsName-7" data-parent-branch-name="SpokeWithTherapist-Yes" data-previous-value="" data-question-group-name="" data-question-id="175" data-question-messages="[]" data-read-only="False" data-reset-answer-on-hide="True" data-tree-level="3" data-type="string" data-value-orig="" data-value-type="TextArea" id="TherapistsName-7" maxchars="1000" onchange="assignedWorkTasks.QuestionChange(this);;assignedWorkTasks.QuestionChangeComplete(this);" rows="1" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal; height: 26px;"></textarea><br>
<span class="chars-remaining" style="width:100%;float:left;margin:0 0 0 0;font-size:10px;">1000 characters remaining
</span>
</div>
</div>
</div>
</div>
jquery
var therapistsName = container.find(".TherapistsName");
var row = therapistsName.parents(".row").first();
$('#row').addClass("displaynone");

It looks like it does hide the entire row,
demo hide row
But as mentioned, if you're able to add an ID and avoid the traversing w/ jQuery, you'd be simplifying it significantly.

a robust way to toggle item display in Jquery

I want to toggle whether to display an item I should do the following:
$(item).css("display", "none")
$(item).css("display", "block")
But this method is not robust enough, given that the item might be "display: flex" or "display: table".
I think in react, I can just delete that element and re-render it when I need to, but is there any simple way to do that using jQuery besides directly modify the html to delete that element?
Thanks.

you should use toggleClass() in case you are working with flex then it would be a better approach to keep the flex properties in a separate class and add/remove or in easy words toggle the flex class if you want to hide or show that container with defaults set to display:none in a separate class, in this way either the container is flex or table it works either ways see the example below
$(".show").on('click', function() {
if ($(this).siblings('.my-item').css('display') == 'flex') {
$(this).siblings('.my-item').toggleClass('myflex');
} else {
$(this).siblings('.my-item').toggleClass('myTable');
}
})
.my-item {
display: none;
}
.myflex {
display: flex;
background-color: #f8f8f8;
}
.myTable {
display: block;
background-color: #d8d8d8;
}
.container {
margin-top: 10px;
border: 5px dashed #c8c8c8;
}
.show {
padding: 10px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<a class="show">TOGLLE THIS ITEM</a>
<div class="my-item myflex">1
</div>
</div>
<div class="container">
<a class="show">TOGLLE THIS ITEM</a>
<div class="my-item myflex">2
</div>
</div>
<div class="container">
<a class="show">TOGLLE THIS ITEM</a>
<div class="my-item myTable">TABLE DISPLAY
</div>
</div>
<div class="container">
<a class="show">TOGLLE THIS ITEM</a>
<div class="my-item myflex">3
</div>
</div>
<div class="container">
<a class="show">TOGLLE THIS ITEM</a>
<div class="my-item myflex">4
</div>
</div>
<div class="container">
<a class="show">TOGLLE THIS ITEM</a>
<div class="my-item myflex">5
</div>
</div>

You could also add a custom css class and switch them using below. This would also give a bit more control over styling.
$(item).addClass('display-none');
$(item).removeClass('display-none');
$(item).removeClass('display-none display-flex'); // For removing multiple classes
and for example the css properties would be like
.display-none{
display: none !important;
}

Why not just use jQuery's show/hide functions?
$(item).hide();
$(item).show();
hide function is roughly equivalent to calling .css( "display", "none" ), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value. (from jQuery documentation)
$('#btnToggle').click(function(){
if($('#item').is(':visible'))
{
$('#item').hide();
}
else
{
$('#item').show();
}
$('#log').html("Current display state: " + $('#item').css('display'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnToggle">toggle</button>
<div id="item" style="display: flex;">
flex div
</div>
<div id="log">
</div>

You can do a
$(item).css("display", "none")
and assign the flex or table value of the display property to any custom attribute, e.g. $(item).attr("disp_prop","flex") and on returning back to display you can do a simple.
$(item).css("display", $(item).attr("disp_prop"))

jQuery if div content starts with <strong> tag the do something

How can I detect if a div starts with a strong tag and add a class to the parent div? For Example, I need to style the output of the results of this autocomplete https://www.devbridge.com/sourcery/components/jquery-autocomplete/
which would then give the following code:
<div class="autocomplete-suggestions" style="position: absolute; max-height: 300px; z-index: 9999; top: 322px; left: 512.328px; width: 383px; display: none;">
<div class="autocomplete-suggestion" data-index="0"><strong>H</strong>airdressers</div>
<div class="autocomplete-suggestion" data-index="1">C<strong>h</strong>artered Surveyor</div>
</div>
Where the div has the tag I would like to add a class to it to then style in CSS for divs that only start with the strong tag.

You can retrieve the first child of an element using jquery's contents() method. You can then check what type of element it is, before adding the class to the parent element if needed, something like this:
$('.autocomplete-suggestion').each(function() {
var firstChild = $(this).contents()[0];
if ($(firstChild).is('strong')) {
$(this).addClass('foo');
}
});
.foo { color: #C00; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="autocomplete-suggestions">
<div class="autocomplete-suggestion" data-index="0"><strong>H</strong>airdressers</div>
<div class="autocomplete-suggestion" data-index="1">C<strong>h</strong>artered Surveyor</div>
</div>