Add Extra Divs To The Dom Jquery ( Toogle Click More Function)

this is my first post in this website and I just wonder if someone can help me with a problem that has been going on for a week now, I dont know much on javascript, but I'll try to

Solution 1:

Your markup / code is a bit hard to follow. Here's how I'd go about it:

JSFiddle

I've used JQuery to make the code a bit easier to work with and used some simpler markup to clarify the example. Note that because I've used the parent/find methods in JQuery, and given everything classes, it's easy to have more than one box and each will work independently.

You can put whatever content you want to be shown and hidden inside the "extraContent" divs - in my example I've put some headers, paragraphs and an image but this can be anything.

Javascript:

$(function() {

$(".toggleLink").on("click", function() {
    // $(this) will be the "more" / "less" link that was clicked.
    // Find its parent, then inside that - select the "extra content"
    // box and toggle its visibility
    var extraContentBox = $(this).parent().find(".extraContent");
    extraContentBox.toggle();

    // Update the text of the toggle link based on the new visiblility
    // of the "extra content" div
    var linkText = (extraContentBox.is(':visible')) ? "less" : "more";
    $(this).parent().find(".toggleLink").text(linkText);
});

});

UPDATE:

I think you'll need to experiment to get it to look right. Here are a few basic things you might need:

To hide an element initially add "display: none;" to the CSS, or in a style tag like this:

<div style="display: none;"></div>

To select an element with JQuery, use #id or .class, e.g.:

$("#someElementID").show();
$(".someClass").hide();

Use an ID to give a specific element a name (must be unique on the page). Use classes for things that are used more than once.

To do something when an element is clicked:

$("#someElement").on("click", function() {
    // code here
});

To determine if an element is visible:

var isVisible = $("#someElement").is(":visible");
if (isVisible) { 
    // do something
}

To get the height of an element:

var height = $("#someElement").height();

To set the height of an element:

$("#someElement").height(100);

Solution 2:

If I understand your question correctly I presume you mean that you want to match the height of the boxes so that they line up next to each other? You could use Javascript to update the height of the containing divs after the new content is shown.

Inside your click handler, after you show/hide the extra content, you could (for each row) fetch the height of each box, and update the others to match the height of the tallest one.

If you're using JQuery, have a look at https://api.jquery.com/height/ - you can use this to both get the height of an element or set it.

In my browser at least, it looks like you have rows with two columns in each - rather than four columns. If this is the case, you'd need to do some logic to loop over the rows and work on pairs of boxes.