0

I have the following button setup:

<div class="BlogManagementDiv">
     <button type="button" onclick="fnToggleBox(AddcategoryDiv)">Add Category</button>                                                    
        <div id="AddcategoryDiv" class="BlogManagementcontainer">
...
        </div>
</div>

Note the onclick does this:

fnToggleBox(AddcategoryDiv)

Where it is passing in a reference to the div below:

AddcategoryDiv

I then access the element in the funciton like this:

    function fnToggleBox(element) 
    {
        if (!$('#'+element.id).is(":visible")) {
            $('#' + element.id).show();
        }
        else {
            $('#' + element.id).hide();
        }
    }

which I can see is completeley ridiculous, as it already has the element, and there is no need to acces it in this way.

My question is, how to properly access this variable using JQuery.

I know how to do using JavaScript, but am trying to do so using JQuery.

I have tried:

function fnToggleBox(element) 
    {
        if (!element).is(":visible")) {
            element.show();
        }
        else {
            element.hide();
        }
    }

and 

function fnToggleBox(element) 
    {
        if (!$element).is(":visible")) {
            $element.show();
        }
        else {
            $element.hide();
        }
    }

but they do not work.

I have googled, but cannot find the answer.

Improve this question
4
  • 1
    jquery is javascript.... so do it the same way. the problem is probably somewhere else, likely the fact that you're expecting AddcategoryDiv to be defined globally... or the syntax/logic errors throughout both attempts. Commented Apr 11, 2016 at 15:15
  • @KevinB The problem is I am trying to understand JQuery. I cant believe there is not a way to do this. The fact that I can retrieve the id means the element is being passed in correctly, and it is just a case of working out how to reference it in the JavaScript method. Commented Apr 11, 2016 at 15:18
  • 1
    You have the ID, why don't you just use it to select the element by ID? also, stop using onclick.. please... even if you aren't using jquery that's a bad idea. Commented Apr 11, 2016 at 15:28
  • 1
    if you alreafy have a reference you can wrap the element simply with $(element) Commented Apr 11, 2016 at 15:29

2 Answers 2

Reset to default
3

Description
You simply need to wrap the element to access the DOM.

<button type="button" onclick="fnToggleBox(AddcategoryDiv)">Add Category</button>

Solution
I believe you are looking to simply .toggle the visibility. You can do this via the .toggle() function in jQuery.

Like so:

function fnToggleBox(element) 
{
  $(element).toggle();
}

Which isn't really worth writing a function wrapper for, but enjoy!

Documentation

http://api.jquery.com/toggle/

Description: Display or hide the matched elements.
.toggle( [duration ] [, complete ] )

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

You mean: $('#' + element.id).toggle(); otherwise it does not work - Whilst that is very helpful as I dd not know about the toggle function, it does not answer the question, as it does not tell me how to achieve it without accessing element.id - it does however imply that way I am doing it is the only way to do this - is that correct? Also, it needs a wrapper as it is not toggling the div calling the function - I have tried:onclick="EditcategoryDiv.toggle();"but did not work - sorry for the long comment!!! +1 btw
@alex no, you should be passing the element id you want to hide to the function. The reason you don't need a wrapper is because the button could simply have onclick="$('#AddcategoryDiv').toggle();" instead of onclick="fnToggleBox('AddcategoryDiv')" that being said the newer paradym is to use function hooks meaning you would do a .on('click', function() {}) in the $function(){} DOM loaded header.
thank you, also very helpful. As a note, if I pass in onclick="fnToggleBox(AddcategoryDiv)" eg without quotes, it references the object directly. Am I missing something?
@Alex if you call the function with onclick="fnToggleBox(AddcategoryDiv)" it will be looking for a variable defined called AddcategoryDiv this variable would have to be GLOBAL for it to find it. Hope that clarifies it more, if not let me know if I should add some of this up to the top
@Alex this seems to work for me function fnToggleBox(element) { console.log($(element).toggle()); } however so does $(AddcategoryDiv).toggle()
|
2

jquery wraps dom elements in the $ Jquery function, once these dom elements are wrapped you get all those nice jquery methods but the underlying dom element remains,

you are close , just pass the node to the $ function as argument:

function fnToggleBox(element) {
      console.log(element)
      console.log($(element))
      console.log($('#' + element.id)[0] === element)
      
        if (!$(element).is(":visible")) {
            $(element).show();
        }
        else {
            $(element).hide();
        }
    
    }
#AddcategoryDiv{
  height:10px;
  width:10px;
  background:red
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="BlogManagementDiv">
  <button type="button" onclick="fnToggleBox(AddcategoryDiv)">Add </button>
  <div id="AddcategoryDiv" class="BlogManagementcontainer">

  </div>
</div>

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.